[vue] Remove add with JSX from CLI default examples

[senola]

1、environment

• window10
• [email protected]
• [email protected]
• storybook/[email protected]
• storybook/[email protected]
• storybook/[email protected]

2、step

• 1、vue init webpack test
• 2、cd /test/
• 3、npm install （run vue ok。。）
• 4、getstorybook
• 5、npm run storybook

3、Issue

when i do the step 5, some error happened from webpack :

and when i access http://localhost:6006/ some error like :

 Error: Module build failed: TypeError: G:/study/test/vue2/src/stories/index.stories.js: Duplicate declaration "h" (This is an error on an internal node. Probably an internal error)
    at File.buildCodeFrameError (G:\study\test\vue2\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\index.js:427:15)
    at Scope.checkBlockScopedCollisions (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\scope\index.js:398:27)
    at Scope.registerBinding (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\scope\index.js:592:16)
    at Scope.registerDeclaration (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\scope\index.js:496:14)
    at Object.BlockScoped (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\scope\index.js:244:28)
    at Object.newFn (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\visitors.js:318:17)
    at NodePath._call (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\path\context.js:44:14)
    at NodePath.visit (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\context.js:103:17)
    at TraversalContext.visit (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\context.js:190:19)
    at Function.traverse.node (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\index.js:114:17)
    at NodePath.visit (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\path\context.js:115:19)
    at TraversalContext.visitQueue (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (G:\study\test\vue2\node_modules\_babel-traverse@6.26.0@babel-traverse\lib\context.js:108:19)
    at Object.<anonymous> (http://localhost:6006/static/preview.bundle.js:33008:7)
    at __webpack_require__ (http://localhost:6006/static/preview.bundle.js:679:30)
    at fn (http://localhost:6006/static/preview.bundle.js:89:20)
    at webpackContext (http://localhost:6006/static/preview.bundle.js:32989:9)
    at http://localhost:6006/static/preview.bundle.js:29827:12
    at Array.forEach (<anonymous>)
    at loadStories (http://localhost:6006/static/preview.bundle.js:29826:14)
    at ConfigApi._renderMain (http://localhost:6006/static/preview.bundle.js:30929:20)
    at render (http://localhost:6006/static/preview.bundle.js:30887:17)
    at ConfigApi.configure (http://localhost:6006/static/preview.bundle.js:30912:9)

how to solve it ?

[johnend]

I am also having this problem when trying to set up story book after running vue-cli.

[ri8ika]

I was also having same problem but finally I found the curlprit:

.add('with JSX', () => ({
    components: { MyButton },
    render() {
      return <my-button onClick={this.action}>With JSX</my-button>;
    },
    methods: { action: linkTo('clicked') },
  }))

The render function is the issue here. Just remove this code and everything will be fine.

[senola]

@ri8ika great! it works

[kwaledesign]

This worked for me as well. Thank you for sharing.

[alexsandro-xpt]

@ri8ika there another way to VueJS and Storybook together accept JSX or if not, there an another way to set template prop from a included file?!

It's horrible and unuseful set and manage html as string in template prop.

[kazupon]

As other workaround:
You can specify h param to render function.

.add('with JSX', () => ({
    components: { MyButton },
    render(h) {
      return <my-button onClick={this.action}>With JSX</my-button>;
    },
    methods: { action: linkTo('clicked') },
  }))

I seem babel-plugin-transform-vue-jsx make strange behaivor. 🤔

@nickmessing
Do you know anything about it?

[alexsandro-xpt]

Amazing @kazupon !! Thank you!

[maggiew61]

@ri8ika thx

[ndelangen]

Seems to be fixed in our example stories