Storybook: Storybook and @vue/cli 3.0

Created on 23 Mar 2018 · 13Comments · Source: storybookjs/storybook

Bug

I've tried to add Storybook to a project which was set-up with @vue/cli 3.0. Adding storybook with getStorybook works fine, but when trying to run it asks for babel-core, wether @babel/core is installed or not. I figure that it could work with a custom Webpack config in ./storybook but this overrides the Vue config completely.

Steps to reproduce

Install a new project with @vue/cli (3.x), add storybook and try to run it.

Please specify which version of Storybook and optionally any affected addons that you're running

Storybook / vue @storybook/vue 3.3.15

Affected platforms

-@vue/cli

vue cli has workaround inactive

Source

aderaaij

👍14

Most helpful comment

Hey guys, I have identified the problem: @vue/cli v3 beta.11 uses vue-loader v5, which is not compatible with storybook that is using vue-loader v3.

According to https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes, just add a webpack.config.js to .storybook folder and write the following in it:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.plugins.push(new VueLoaderPlugin())

  return defaultConfig;
};

This would do the trick.

beeplin on 27 May 2018

🎉12 👍5

All 13 comments

Bug

it looks like the babel version used by the vue/cli 3 is conflicting with the expected version by storybook and when trying to run storybook it throws this error:

ERROR in ./.storybook/addons.js Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Steps to reproduce

Init a project using vue cli 3(instalition guide in the link)
$ vue create my-project

Add storybook to the project
$ cd my-project
$ getstorybook

Try to run storybook
$ yarn run storybook

Please specify which version of Storybook and optionally any affected addons that you're running

"@vue/cli": "^3.0.0-beta.6"
"@storybook/cli": "^3.4.0"
"@storybook/vue": "^4.0.0-alpha.1"
"babel-core": "^7.0.0-0"

Affected platforms

@vue/cli 3.x

CoffiDev on 31 Mar 2018

👍14

sounds like this might be related to https://github.com/storybooks/storybook/issues/3335

danielduan on 16 Apr 2018

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 7 May 2018

I confirm currently storybook still doesn't work with @vue/cli 3 beta.11. It will throw:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

beeplin on 23 May 2018

👍3

Hey guys, I have identified the problem: @vue/cli v3 beta.11 uses vue-loader v5, which is not compatible with storybook that is using vue-loader v3.

According to https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes, just add a webpack.config.js to .storybook folder and write the following in it:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.plugins.push(new VueLoaderPlugin())

  return defaultConfig;
};

This would do the trick.

beeplin on 27 May 2018

🎉12 👍5

@beeplin wow.....thanks, it's work

peakcool on 29 May 2018

stale[bot] on 19 Jun 2018

stale[bot] on 18 Jul 2018

I am working on https://github.com/pksunkara/vue-cli-plugin-storybook

pksunkara on 22 Jul 2018

😄2

this minimalist config work for me :

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "@storybook/vue": "^3.4.10",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "vue-loader": "^13.3.0"
  }
}

aradjdi on 6 Aug 2018

👍1

The problem is with getting Storybook to work with Vue CLI specifically, not just Vue.

garretmh on 6 Aug 2018

My storybook plugin for vue-cli (https://github.com/pksunkara/vue-cli-plugin-storybook) has been working since last week. I think we can close this issue.

pksunkara on 6 Aug 2018

👍2

stale[bot] on 27 Aug 2018

Was this page helpful?

0 / 5 - 0 ratings