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

[tmeasday]

Bug or support request summary

When using SB in a vue app, this line runs:

https://github.com/storybooks/storybook/blob/71be40518b0e42e93ad37dc4669d10dc2a1d4159/app/vue/src/server/framework-preset-vue.js#L32

I'm not sure if it should even be running that line, as this project has a babel.config.js which contains:

module.exports = {
  presets: ["@vue/app"]
};

Steps to reproduce

npx -p @vue/cli vue create --preset hichroma/vue-preset-learnstorybook taskbox
cd taskbox

npx -p @storybook/cli@rc sb init
yarn storybook

You'll see:

ERR! Error: Cannot find module 'babel-preset-vue'
ERR!     at Function.Module._resolveFilename (module.js:547:15)
ERR!     at Function.resolve (internal/module.js:18:19)
ERR!     at Object.babelDefault (/private/tmp/taskbox/node_modules/@storybook/vue/dist/server/framework-preset-vue.js:38:79)
ERR!     at /private/tmp/taskbox/node_modules/@storybook/core/dist/server/presets.js:73:26
ERR!     at Array.reduce (<anonymous>)
ERR!     at applyPresets (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/presets.js:66:18)
ERR!     at Object.apply (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/presets.js:84:14)
ERR!     at /private/tmp/taskbox/node_modules/@storybook/core/dist/server/core-preset-dev.js:37:20
ERR!     at _default (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/loadCustomBabelConfig.js:88:29)
ERR!     at Object.babel (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/core-preset-dev.js:36:45)
ERR!     at /private/tmp/taskbox/node_modules/@storybook/core/dist/server/presets.js:73:26
ERR!     at Array.reduce (<anonymous>)
ERR!     at applyPresets (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/presets.js:66:18)
ERR!     at Object.apply (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/presets.js:84:14)
ERR!     at Object.babel (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/config.js:27:22)
ERR!     at getWebpackConfig (/private/tmp/taskbox/node_modules/@storybook/core/dist/server/config.js:55:30)

babel-preset-vue is not a (peer) dependency of @storybook/vue, and I don't think it should be being used at all.

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

• @storybook/vue 4.0.0-rc.0

Affected platforms

Dependencies of app:

"dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-plugin-unit-jest": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-prettier": "^3.0.5",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.0.1",
    "vue-template-compiler": "^2.5.17",
    "@storybook/vue": "^4.0.0-rc.0",
    "@storybook/addon-actions": "^4.0.0-rc.0",
    "@storybook/addon-links": "^4.0.0-rc.0",
    "@storybook/addons": "^4.0.0-rc.0",
    "babel-loader": "^8.0.4"
  }

[tmeasday]

@igor-dv this seems to be your area of expertise?

[igor-dv]

Yeah, that's probably a bug. I am not sure what should really be in vue, maybe @pksunkara can assist (also why the CLI tests are green 🤔 ?)

Regarding the presets, I just changed what was before into presets.,. we were extending a default babel config before, maybe it's already not relevant.

@pksunkara what prevents us from integrating the vue-plugin you wrote into the @storybook/vue?

[pksunkara]

Old vue projects?

[tmeasday]

@igor-dv - I haven't really been following the preset stuff, but I'll just add the same vue project works fine with SB@3.4. In that case we do some tweaks to make it work, but the .babelrc still contains preset: "@vue/app".

So either @storybook/vue@3.4 was installing babel-preset-vue, or it wasn't requiring it.

[igor-dv]

I think we need some help from the vue people that know better what is supported and what should be done...

@pksunkara, what do you mean by "old projects"? Can't we make SB/vue@4 work for the new projects?

[pksunkara]

I meant vue cli plugin won't work with old projects.

[igor-dv]

And should we support the old projects in SB/vue@4 itself?

[shilman]

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?

[tmeasday]

I did some more investigation into this. Here's what I found.

1. This commit removed babel-preset-vue from being installed by the SB CLI (sb init), however the vue SB preset still seems to require it no matter what. Re-adding babel-preset-vue to my project seems to resolve this issue; perhaps we should revert to installing it from the CLI? @Hypnosphi perhaps you have some insight here?

2. For some reason, vue CLI ends up installing @babel/core@7.0.0-beta.47 (no idea why this is the case as it depends on @babel/core@^7.0.0). In any case, this old version of babel has some issues when you run storybook. Running yarn add --dev @babel/core@^7.0.0 resolves the problem. Perhaps sb init should also add that dependency, at least until we resolve what's happening w/ the vue CLI?

[igor-dv]

Re-adding babel-preset-vue to my project seems to resolve this issue;

The question is do we even need this plugin?
IMO we need to support a new version of vue out of the box. and if people need the old one, we should explain how to backward-comapt it - the same as we do with babel7 vs babel6.

[tmeasday]

The question is do we even need this plugin?

I have no idea. It isn't clear to me what the difference between babel-preset-vue, babel-preset-vue-app and @vue/babel-preset-app are, TBH.

I'm not sure why the vue add-on requires babel-preset-vue, or why getstorybook was previously adding it to user's apps.

[tmeasday]

In the interests of not blocking the SB4 release: #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?

[pksunkara]

I wouldn't care about this until we improve our configuration/preset system.

[fairyly]

"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

[jrtitus]

I was running into the same problem - just started using Storybook today and trying to get it to work with a Vue project I have. Seemed like a simple set of steps to reproduce:

1. npx -p @storybook/cli sb init
2. yarn storybook

$ yarn storybook
yarn run v1.12.1
$ start-storybook -p 6006
info @storybook/vue v4.0.4
info
info => Loading presets
ERR! Error: Cannot find module 'babel-preset-vue'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.babelDefault (C:\ghe\vue-cli-invariant\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:34:42)
ERR!     at accumulationPromise.then.newConfig (C:\ghe\vue-cli-invariant\node_modules\@storybook\core\dist\server\presets.js:73:72)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  { Error: Cannot find module 'babel-preset-vue'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.babelDefault (C:\ghe\vue-cli-invariant\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:34:42)
ERR!     at accumulationPromise.then.newConfig (C:\ghe\vue-cli-invariant\node_modules\@storybook\core\dist\server\presets.js:73:72)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!   stack:
ERR!    'Error: Cannot find module \'babel-preset-vue\'\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)\n    at Function.resolve (internal/modu
les/cjs/helpers.js:30:19)\n    at Object.babelDefault (C:\\ghe\\vue-cli-invariant\\node_modules\\@storybook\\vue\\dist\\server\\framework-preset-vue.js:34:42)\n    at accumulat
ionPromise.then.newConfig (C:\\ghe\\vue-cli-invariant\\node_modules\\@storybook\\core\\dist\\server\\presets.js:73:72)\n    at process._tickCallback (internal/process/next_tick
.js:68:7)',
ERR!   code: 'MODULE_NOT_FOUND' }
Done in 4.06s.

Also, I was running into #4065.

As it turns out, I was stuck on Vue CLI v2.9.6.

Updating to @vue/cli v3.1.3 fixed both issues.

[bartdominiak]

Hi, I've the same problem with cannot find module 'babel-preset-vue
Even if I've @vue/cli@3.1.3

[igor-dv]

Have you installed it?

[DaSchTour]

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.

[ndelangen]

@breadadams's solution doesn't seem right to me, but there's not enough context there to say what the right solution is.

Please paste the complete error with stacktrace @crusenov

[graup]

@ndelangen why was this issue closed? If it is resolved, could you summarize the changes?

[ndelangen]

Ow I just looked at the issue @crusenov was having and though that there wasn't much left to do on that. but I see now it's unrelated to the original ticket, I'll re-open. Thanks

[crusenov]

@ndelangen I'm using vue cli storybook without webpack config. When trying to build the app there are errors related to importing files which paths starts with @ instead of src. As @breadadams suggested I've created webpack alias for @. After that I've encountered another issues with @.

[breadadams]

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, storybookjs/vue-cli-plugin-storybook#23 looks to be more suited, or open a new issue if you believe there's a bug. Thanks!

[graup]

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.

[shilman]

@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

[pksunkara]

Would we be dropping support for Babel 6 based projects as a whole? If yes, then we can simply remove it. Otherwise, maybe it is better to write a different preset which is for Vue projects with Babel 6 and remove this from the main preset.

[graup]

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

[ndelangen]

@graup let me know if you need any help?

[shilman]

@graup This might also help with #9841

[graup]

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:

• storybook/scripts/run-e2e-config.ts

  Line 113 in 8fd3ca6

  export const sfcVue: Parameters = {

• https://github.com/storybookjs/storybook/tree/next/lib/cli/test/fixtures/sfc_vue

• storybook/lib/cli/src/project_types.ts

  Lines 98 to 111 in ee7c9ec

  	{
  	preset: ProjectType.SFC_VUE,
  	dependencies: ['vue-loader', 'vuetify'],
  	matcherFunction: ({ dependencies }) => {
  	return dependencies.some(Boolean);
  	},
  	},
  	{
  	preset: ProjectType.VUE,
  	dependencies: ['vue', 'nuxt'],
  	matcherFunction: ({ dependencies }) => {
  	return dependencies.some(Boolean);
  	},
  	},

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.12 containing PR #10813 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[ndelangen]

Review the officially endorsed ways of using Vue and adjust the test cases to that

YES 💯x 💯 !

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.14 containing PR #10909 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.