framework-preset-vue requires `babel-preset-vue` but does not depend on it
tmeasday opened this issue · 54 comments
Bug or support request summary
When using SB in a vue app, this line runs:
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 storybookYou'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"
}
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?
Old vue projects?
@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.
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?
I meant vue cli plugin won't work with old projects.
And should we support the old projects in SB/vue@4 itself?
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?
I did some more investigation into this. Here's what I found.
-
This commit removed
babel-preset-vuefrom being installed by the SB CLI (sb init), however the vue SB preset still seems to require it no matter what. Re-addingbabel-preset-vueto my project seems to resolve this issue; perhaps we should revert to installing it from the CLI? @Hypnosphi perhaps you have some insight here? -
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. Runningyarn add --dev @babel/core@^7.0.0resolves the problem. Perhapssb initshould also add that dependency, at least until we resolve what's happening w/ the vue CLI?
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.
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.
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?
I wouldn't care about this until we improve our configuration/preset system.
"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
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:
npx -p @storybook/cli sb inityarn 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.
Hi, I've the same problem with cannot find module 'babel-preset-vue
Even if I've @vue/cli@3.1.3
Have you installed it?
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.
Nothing changed, so probably this bug is still there. Nothing to close here!
Happening with me as well when I run build-storybook -o dist/storybook.
Ubuntu: 18.04.
Node: v11.6.0.
npm: 6.7.0.
> build-storybook -o dist/storybook
info @storybook/vue v4.1.11
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (8.94 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN vendors~main.0735f4e0f8d96ee50d94.bundle.js (763 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN main (765 KiB)
WARN runtime~main.bf7f1bbd18bd2f1ec8df.bundle.js
WARN vendors~main.0735f4e0f8d96ee50d94.bundle.js
WARN main.b1972778ded3cdf52bac.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Building preview..
info => Loading preview config..
info => Loading presets
(node:6725) UnhandledPromiseRejectionWarning: Error: Cannot find module 'babel-preset-vue'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.resolve (internal/modules/cjs/helpers.js:30:19)
at Object.babelDefault (/home/guastallaigor/Documents/github/vue-simple-timeline/node_modules/@storybook/vue/dist/server/framework-preset-vue.js:38:42)
at accumulationPromise.then.newConfig (/home/guastallaigor/Documents/github/vue-simple-timeline/node_modules/@storybook/core/dist/server/presets.js:78:72)
at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:6725) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handAny workarounds?
Did anybody test this with storybook 5?
Just updated a Vue project from 3.4.10 to 5.0.1 and started to get the Error: Cannot find module 'babel-preset-vue' message (on start-storybook command).
Installing it as a dev. dependency resolves the issue. It should probably be added to the instructions if it's necessary, right?
@breadadams I think that makes sense. Mind creating a small docs PR?
Will do @shilman 👍
cc @backbone87
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.
@backbone87 @pksunkara @elevatebart @igor-dv Is there any chance one of you can take a look at this in 5.2? Our support for Vue will always be second-class unless we can resolve issues like this. I'm happy to help on the presets side of things, and we can highlight this work when we start hyping presets in 5.2.
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.
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!
@shilman babel-preset-vue is required for babel@6 based vue projects. We can remove it for babel@7 based vue projects.
@pksunkara can we move that out into a preset?
Yes, but should be properly named. preset-vue is not enough because it's for babel6 and that too only non vue-cli stuff.
sadly i cant contribute much to this issue, since all my projects are done with vue-cli 3+ and vue-cli-plugin-storybook. the latter doesnt use the bundled preset in @storybook/vue as far as i can tell and instead merges the webpack config from vue-cli with the one from storybook and it "just works".
and it "just works".
😊. There are still some issues with it. I am currently working on contributing to @vue/cli v4 release. Will get back to the storybook plugin after that is done. Thanks for the help you provided in the meanwhile.
we should definitely update the storybook vue docs to recommend the usage of vue-cli-plugin-storybook as the "default storybook intergration" for vue projects. there is just too much going on in the webpack config to make a foolproof integration guide. ofc for non vue-cli 3+ users this is a little bit annoying
@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 ❤️
@tmeasday After running yarn add --dev @babel/core@^7.0.0 I have problems with importing files with @ in my project. (Module not found: Error: Can't resolve '@/...) Any idea?
@crusenov I'm not sure that's entirely related to this issue. Nevertheless, I think you'll need a custom resolver in storybook's webpack config:
resolve: {
alias: {
'@': path.resolve(__dirname, '../src')
}
}@breadadams After adding webpack config - config.resolve.alias['@'] = path.resolve('src') there are errors related with importing files (@ import ...some file). Any idea?
@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
@ndelangen why was this issue closed? If it is resolved, could you summarize the changes?
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
@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 @.
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!
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.
@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
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.
OK, I'll work on this. I can make a version that has some sort of migration path for Babel 6 users.
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:
- Create an empty package and install 'vue-loader'
- Run
sb init, which recognizes the project as a SFC_VUE project, based on the 'vue-loader' dep - sb init generates some components and stories based on fixtures. One of those example stories uses JSX.
- 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
- 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) - Review the officially endorsed ways of using Vue and adjust the test cases to that
- Finally, remove all mentions of
babel-preset-vuefrom the code - Wait for Vue 3 to come out soon and probably have a lot of new issues ;)
Some more code references:
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.
Review the officially endorsed ways of using Vue and adjust the test cases to that
YES 💯x 💯 !
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.