Storybook: [vue] Remove add with JSX from CLI default examples

Created on 12 Jan 2018 · 9Comments · Source: storybookjs/storybook

1、environment

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\[email protected]@babel-core\lib\transformation\file\index.js:427:15)
    at Scope.checkBlockScopedCollisions (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\scope\index.js:398:27)
    at Scope.registerBinding (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\scope\index.js:592:16)
    at Scope.registerDeclaration (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\scope\index.js:496:14)
    at Object.BlockScoped (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\scope\index.js:244:28)
    at Object.newFn (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\visitors.js:318:17)
    at NodePath._call (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\path\context.js:44:14)
    at NodePath.visit (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\context.js:103:17)
    at TraversalContext.visit (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\context.js:190:19)
    at Function.traverse.node (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\index.js:114:17)
    at NodePath.visit (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\path\context.js:115:19)
    at TraversalContext.visitQueue (G:\study\test\vue2\node_modules\[email protected]@babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (G:\study\test\vue2\node_modules\[email protected]@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 ?

vue cli help wanted

Source

senola

👍7

Most helpful comment

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.

ri8ika on 18 Jan 2018

👍16 😄4 🎉1

All 9 comments

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

johnend on 14 Jan 2018

👍1

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.

ri8ika on 18 Jan 2018

👍16 😄4 🎉1

@ri8ika great! it works

senola on 18 Jan 2018

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

kwaledesign on 23 Jan 2018

@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.

alexsandro-xpt on 24 Jan 2018

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?