Storybook and @vue/cli 3.0

[aderaaij]

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

[CoffiDev]

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

[danielduan]

sounds like this might be related to #3335

[stale]

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!

[beeplin]

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]

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.

[rubickecho]

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

[stale]

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]

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!

[pksunkara]

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

[aradjdi]

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

[garretmh]

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

[pksunkara]

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.

[stale]

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!

[elisiondan]

In my case all I had to do was to run npm install -D vue-loader@15.9.6

We're using "@storybook/vue": "^6.2.9"