vue-cli-plugin-storybook: Unable to successfully run local storybook on new CLI Project

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 16 (5 by maintainers)

Most upvoted comments

Fixed adding an empty .babelrc file inside .storybook folder

beliolfa on Oct 1, 2018

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"
  }

GuilhermeHideki on Sep 15, 2018

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

tereshhhchenko on Sep 11, 2018

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

pksunkara on Sep 10, 2018

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

gabemule on Sep 12, 2018