storybook: framework-preset-vue requires `babel-preset-vue` but does not depend on it

OK, I’ll work on this. I can make a version that has some sort of migration path for Babel 6 users.

It is 2020 and babel-preset-vue is still in the code and docs. This makes Storybook unusable out-of-the-box when using vue-cli and the storybook-vue guide. (1. Install vue-cli 2. Create a new vue project 3. Try to add storybook according to the guide. It forces you to install babel-preset-vue which is completely unnecessary.)

What do we need to do here?

As @pksunkara mentioned, we could just get rid of it altogether? Nobody creating a new project today would use Babel 6.

/Edit: If anyone wants a quick workaround, I created a minimal Storybook-Vue-TS repository which uses a patch file to get rid of this requirement.

You need to add your custom loaders (looks like you’re using stylus) to the storybook webpack config too @crusenov.

The current issue really isn’t related to this though, https://github.com/storybookjs/vue-cli-plugin-storybook/issues/23 looks to be more suited, or open a new issue if you believe there’s a bug. Thanks!

@backbone87 @pksunkara I’m fine as long as we have great documentation and support for the latest and greatest. Older versions can be in the documentation or even documented in issues. really feels like storybook for Vue could use a little love ❤️

As far as I can see the fix here is to just remove the automatic inclusion of that preset and make it clear in the documentation that users should specify a preset themselves? (Which in most cases will have already been taken care of.)

Can someone reiterate why that preset is there in the first place? It seems counter-intuitive to forcefully add babel presets to existing babel projects.

Will do @shilman 👍

I ran into this problem while migrating from webpack 3/stroybook 3 to webpack 4/storybook 4. We removed the babel preset as we don’t use it anymore in our vue build. I think at least this should be added as a peer dependency until it is clear how to proceed. As the preset is requirered at runtime it has to be some kind of dependency.

"dependencies": {
    "vue": "^2.5.17",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@storybook/vue": "^4.0.0-rc.6",
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.1",
    "@vue/cli-service": "^3.1.1",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17"
  },

I use vue-cli@3 , I encountered the same problem on window 10

In the interests of not blocking the SB4 release: https://github.com/storybooks/storybook/pull/4535

There may be better solutions, but AFAICT this works and doesn’t introduce problems. We can do a better fix in a 4.0.1 perhaps?

I’m confused here. AFAICT this is a blocker for the 4.0 release—any chance we can get some clarity on this in the next day or so?

Here’s a small update. While working on #10813 I tried to remove babel-preset-vue from storybook’s vue preset. Existing projects relying on it can be pretty easily migrated by adding it back in manually, but I ran into a bunch of problems with the E2E tests (sb init). I may be mistaken but this is how I understand it now.

As far as I can tell, the SFC_VUE e2e test does this:

1. Create an empty package and install ‘vue-loader’
2. Run sb init, which recognizes the project as a SFC_VUE project, based on the ‘vue-loader’ dep
3. sb init generates some components and stories based on fixtures. One of those example stories uses JSX.
4. storybook build works only if you have babel-preset-vue (that adds support for JSX). It fails if that preset is missing from the babel config.

My questions:

• Is this a valid scenario? Does anyone use vue in this way?
• What’s the reason for the distinction between VUE and SFC_VUE anyway? Is that maybe obsolete?
• The main reason the tests fail after the change is missing JSX support which came from babel-preset-vue (I think?). Without that preset, no JSX. Maybe we could remove the use of JSX in the generated story? Users of JSX in Vue should be using another babel plugin anyway according to the vue docs.
• OR since this problem really is just in the story code, shouldn’t JSX be handled by the babel config provided by storybook? Why does this expect to have JSX support through babel-preset-vue?

I think what we need to do is

1. Make that test work without babel-preset-vue (at the moment, there’s a weird cross-dependency from the story js code to that preset)
2. Review the officially endorsed ways of using Vue and adjust the test cases to that
3. Finally, remove all mentions of babel-preset-vue from the code
4. Wait for Vue 3 to come out soon and probably have a lot of new issues 😉

Some more code references:

• https://github.com/storybookjs/storybook/blob/8fd3ca6e0cb2f34049d5fc2e29e422482ba31fd9/scripts/run-e2e-config.ts#L113
• https://github.com/storybookjs/storybook/tree/next/lib/cli/test/fixtures/sfc_vue
• https://github.com/storybookjs/storybook/blob/ee7c9ec6f44436e2182b6ae91d1cbe5258c219d4/lib/cli/src/project_types.ts#L98-L111

@graup any chance you can take a crack at this? We’re working on storybook 6.0 right now, so there’s never been a better time to make a breaking change

We should definitely get rid of babel-preset-vue, as far as I can tell that is not even compatible with Babel 7 (it’s from the time before babel switched from the babel-preset-name naming to @babel/name). I tried to use JSX in Vue with it and it creates all sorts of errors.

For now, is there a workaround to tell @storyboard/vue to NOT require babel-preset-vue? I want to use @vue/app or @vue/babel-preset-app instead, as specified in my babel config.

Nothing changed, so probably this bug is still there. Nothing to close here!