storybookjs/vue-cli-plugin-storybook

Unable to successfully run local storybook on new CLI Project

earthtone opened this issue · 16 comments

earthtone commented

On a fresh project created using vue cli@3.0.1, I am able to add the plugin with no warnings or errors, but when immediately running the serve:storybook script, I receive the following warning, which prevents all stories from rendering:

WARNING in ./src/stories/index.stories.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: programPath.hub.addHelper is not a function
    at wrapInterop (/Users/tone/Documents/JS/_snbx/st/node_modules/@storybook/core/node_modules/@babel/helper-module-transforms/lib/index.js:165:45)
    at PluginPass.exit (/Users/tone/Documents/JS/_snbx/st/node_modules/@storybook/core/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:174:70)
    at newFn (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/path/context.js:65:20)
    at NodePath.call (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/path/context.js:109:8)
    at TraversalContext.visitQueue (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/context.js:142:16)
    at TraversalContext.visitSingle (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/context.js:102:19)
    at TraversalContext.visit (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/context.js:182:19)
    at Function.traverse.node (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/index.js:106:17)
    at traverse (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/traverse/lib/index.js:76:12)
    at transformFile (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/core/lib/transformation/index.js:116:29)
    at runSync (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/core/lib/transformation/index.js:45:3)
    at runAsync (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/Users/tone/Documents/JS/_snbx/st/node_modules/@babel/core/lib/transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/stories sync .stories.js$ ./index.stories.js
 @ ./config/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./config/storybook/config.js (webpack)-hot-middleware/client.js?reload=true

I've tried this with both the default preset provided by vue-cli and a manually entered configuration, and I consistently receive the same result. As pointed out by this comment, I believe the issue to be babel related.

pksunkara commented

Probably because of the preset support in alpha.21 release of storybook. Will look into it tonight.

404passionFruit commented

@pksunkara Thank you for your work on this issue. Could you please tell, if it is possible to downgrade meanwhile?

404passionFruit commented

After playing around with dependencies and adding

 "@babel/core": "^7.0.0",
 "babel-loader": "^8.0.2",

I managed to get rid of programPath.hub.addHelper is not a function error, but got this error instead:

ERROR in ./src/components/MyButton.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
|   <button class="button is-primary" @click="onClick">

Is it even a step forward? :)

pksunkara commented

I dont think so 😄 . You should try to downgrade @storybook dependencies to alpha.20 in your package-lock.json or yarn.lock.

  • 🎉2
404passionFruit commented

@pksunkara Thank you, now it works
Not a fan of downgrading, but it is okay as temporary solution. I hope it won't take long to make it work with alpha.21 :)

gabemule commented

@pksunkara
I wasn't able to run in a old project either, its using storybook v3.4.10 and shows the same error message.
Tried to upgrade to v4.0.0-alpha.20 but didn't seem to work either.
Seems to be a conflict due to another dependency.

Module build error in stories:

WARNING in ./src/stories/title.story.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: programPath.hub.addHelper is not a function
    at wrapInterop (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/helper-module-transforms/lib/index.js:165:45)
    at PluginPass.exit (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@storybook/core/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:174:70)
    at newFn (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/path/context.js:65:20)
    at NodePath.call (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/path/context.js:109:8)
    at TraversalContext.visitQueue (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/context.js:142:16)
    at TraversalContext.visitSingle (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/context.js:102:19)
    at TraversalContext.visit (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/context.js:182:19)
    at Function.traverse.node (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/index.js:106:17)
    at traverse (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/traverse/lib/index.js:76:12)
    at transformFile (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/core/lib/transformation/index.js:116:29)
    at runSync (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/core/lib/transformation/index.js:45:3)
    at runAsync (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/Users/gab/Desktop/CodePlay/ame-components/node_modules/@babel/core/lib/transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
 @ ./src/stories sync .story.js$ ./title.story.js
 @ ./config/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./config/storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Moment dependency missing:

ERROR in ./node_modules/react-datetime/src/DaysView.js
Module not found: Error: Can't resolve 'moment' in '/Users/gab/Desktop/CodePlay/ame-components/node_modules/react-datetime/src'
 @ ./node_modules/react-datetime/src/DaysView.js 5:10-27
 @ ./node_modules/react-datetime/src/CalendarContainer.js
 @ ./node_modules/react-datetime/DateTime.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/Date/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/types/index.js
 @ ./node_modules/@storybook/addon-knobs/dist/components/Panel.js
 @ ./node_modules/@storybook/addon-knobs/dist/register.js
 @ ./node_modules/@storybook/addon-knobs/register.js
 @ ./config/storybook/addons.js
 @ multi ./config/storybook/addons.js ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js

SASS loader error:

ERROR in ./src/assets/sass/amestore.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| // generics
> @import 'generics/breakpoint';
| @import 'generics/mixins';
| @import 'generics/typography';
 @ ./config/storybook/config.js 15:0-46
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./config/storybook/config.js (webpack)-hot-middleware/client.js?reload=true
404passionFruit commented

Here are my package.json dependencies, I hope this can be helpful for those who also decided to downgrade for now:

"devDependencies": {
    "@storybook/addon-actions": "4.0.0-alpha.20",
    "@storybook/addon-links": "4.0.0-alpha.20",
    "@storybook/addon-notes": "4.0.0-alpha.20",
    "@storybook/addons": "4.0.0-alpha.20",
    "@storybook/channel-postmessage": "4.0.0-alpha.20",
    "@storybook/channels": "4.0.0-alpha.20",
    "@storybook/client-logger": "4.0.0-alpha.20",
    "@storybook/components": "4.0.0-alpha.20",
    "@storybook/core": "4.0.0-alpha.20",
    "@storybook/core-events": "4.0.0-alpha.20",
    "@storybook/node-logger": "4.0.0-alpha.20",
    "@storybook/ui": "4.0.0-alpha.20",
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "lint-staged": "^7.2.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "typescript": "^3.0.0",
  }

@gabemule please let me know if it can be any help

  • 👍2
gabemule commented

Here are my package.json dependencies, I hope this can be helpful for those who also decided to downgrade for now:

"devDependencies": {
    "@storybook/addon-actions": "4.0.0-alpha.20",
    "@storybook/addon-links": "4.0.0-alpha.20",
    "@storybook/addon-notes": "4.0.0-alpha.20",
    "@storybook/addons": "4.0.0-alpha.20",
    "@storybook/channel-postmessage": "4.0.0-alpha.20",
    "@storybook/channels": "4.0.0-alpha.20",
    "@storybook/client-logger": "4.0.0-alpha.20",
    "@storybook/components": "4.0.0-alpha.20",
    "@storybook/core": "4.0.0-alpha.20",
    "@storybook/core-events": "4.0.0-alpha.20",
    "@storybook/node-logger": "4.0.0-alpha.20",
    "@storybook/ui": "4.0.0-alpha.20",
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "lint-staged": "^7.2.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "typescript": "^3.0.0",
  }

@gabemule please let me know if it can be any help

Thanks a lot @HelloDeadline , i will try to use yours as reference!

pksunkara commented

Released 0.4.8. Please install storybook freshly and this should work now.

gabemule commented

Released 0.4.8. Please install storybook freshly and this should work now.

@pksunkara
Sorry to return to this, but latest still 0.4.7 in npm versions.

https://www.npmjs.com/package/vue-cli-plugin-storybook

  • 👍1
GuilhermeHideki commented

To not edit manually the yarn.lock file, I fixed the version in the package.json file
Documentation

  "resolutions": {
    "@storybook/addon-actions": "4.0.0-alpha.20",
    "@storybook/addon-links": "4.0.0-alpha.20",
    "@storybook/addon-notes": "4.0.0-alpha.20",
    "@storybook/addon-options": "4.0.0-alpha.20",
    "@storybook/addons": "4.0.0-alpha.20",
    "@storybook/channel-postmessage": "4.0.0-alpha.20",
    "@storybook/channels": "4.0.0-alpha.20",
    "@storybook/client-logger": "4.0.0-alpha.20",
    "@storybook/components": "4.0.0-alpha.20",
    "@storybook/core": "4.0.0-alpha.20",
    "@storybook/core-events": "4.0.0-alpha.20",
    "@storybook/node-logger": "4.0.0-alpha.20",
    "@storybook/ui": "4.0.0-alpha.20",
    "@storybook/vue": "4.0.0-alpha.20"
  }
  • 👍1
  • 🎉2
beliolfa commented

Fresh install of 0.4.8 and still having the programPath.hub.addHelper is not a function issue. Any tip?

pksunkara commented

@disitec What are the storybook dependencies that got installed?

beliolfa commented 
"vue-cli-plugin-storybook": "^0.4.8",
"@storybook/addon-actions": "4.0.0-alpha.20",
"@storybook/addon-links": "4.0.0-alpha.20",
beliolfa commented

Fixed adding an empty .babelrc file inside .storybook folder

  • 👍3
  • 😄1
  • 🎉1
  • ❤️2
  • 🚀1
pksunkara commented

@disitec I wasn't able to reproduce your issue. What were the features you were using when you created the project using vue-cli?