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

tmeasday · 2018-10-18T01:01:47Z

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

The text was updated successfully, but these errors were encountered:

tmeasday · 2018-10-18T01:02:21Z

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

igor-dv · 2018-10-18T08:01:49Z

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 · 2018-10-18T15:58:08Z

Old vue projects?

tmeasday · 2018-10-18T23:06:48Z

@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 · 2018-10-21T09:45:20Z

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 · 2018-10-21T09:48:24Z

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

igor-dv · 2018-10-21T10:05:33Z

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

shilman · 2018-10-22T06:13:59Z

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 · 2018-10-23T01:39:34Z

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

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?
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 · 2018-10-23T08:08:20Z

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 · 2018-10-23T08:24:10Z

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.

This was removed in e496dfb Probably we should not even be using this preset (see #4475 (comment)), but we are, so I will add this for now to get it working.

tmeasday · 2018-10-24T05:22:44Z

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 · 2018-10-28T00:28:23Z

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

fairyly · 2018-11-10T07:22:18Z

"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 · 2018-11-12T22:34:41Z

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 init
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 · 2018-11-17T16:10:05Z

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

igor-dv · 2018-11-20T10:01:44Z

Have you installed it?

DaSchTour · 2018-12-13T07:55:01Z

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 · 2019-09-24T07:55:47Z

@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 · 2019-09-24T11:37:30Z

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

ndelangen · 2019-09-24T11:56:24Z

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 · 2019-09-24T16:35:46Z

@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 · 2019-09-24T17:44:15Z

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 · 2020-02-26T08:40:31Z

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 · 2020-02-26T15:19:37Z

@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 · 2020-02-26T15:57:03Z

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 · 2020-02-26T17:15:33Z

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

ndelangen · 2020-02-27T13:41:41Z

@graup let me know if you need any help?

shilman · 2020-03-07T01:42:54Z

@graup This might also help with #9841

See the vue-kitchen-sink app for a migration path. Basically you just need to add the preset to your or storybook's babel config.

graup · 2020-05-20T13:50:42Z

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-vue from the code
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 · 2020-05-21T06:20:35Z

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 · 2020-05-25T10:46:22Z

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

YES 💯x 💯 !

shilman · 2020-05-25T13:52:53Z

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.

tmeasday added bug vue labels Oct 18, 2018

igor-dv mentioned this issue Oct 22, 2018

babel-preset-vue missing as peer dependency #4505

Closed

shilman added this to the v4.0.0 milestone Oct 22, 2018

igor-dv mentioned this issue Oct 23, 2018

Not able to setup storyshot onto storybook with addon-storyshot for Vue app generated by vue cli 3 #4484

Closed

tmeasday added a commit that referenced this issue Oct 24, 2018

Revert to installing babel-preset-vue from view installer.

83c6ded

This was removed in e496dfb Probably we should not even be using this preset (see #4475 (comment)), but we are, so I will add this for now to get it working.

tmeasday mentioned this issue Oct 24, 2018

Fix issue with sb init on the Vue CLI #4535

Merged

ndelangen modified the milestones: v4.0.0, next Oct 29, 2018

y-nk mentioned this issue Nov 21, 2018

Update guide for Vue to match current requirements #4825

Merged

stale bot added the inactive label Dec 11, 2018

stale bot removed the inactive label Dec 13, 2018

ndelangen closed this as completed Sep 24, 2019

ndelangen reopened this Sep 24, 2019

shilman modified the milestones: 5.2.x, 5.3.x Jan 11, 2020

shilman modified the milestones: 5.3.x, 6.0 breaking Mar 26, 2020

graup mentioned this issue Mar 29, 2020

vue-jsx: update babel-preset-vue to @vue/cli-plugin-babel/preset #10246

Closed

graup mentioned this issue May 18, 2020

Vue: Add vue-cli example and remove babel-preset-vue #10821

Merged

shilman pushed a commit that referenced this issue May 19, 2020

Vue: Remove babel-preset-vue #4475

14d3e1b

See the vue-kitchen-sink app for a migration path. Basically you just need to add the preset to your or storybook's babel config.

mrmckeb mentioned this issue May 20, 2020

Core: Zero-config TypeScript loading #10813

Merged

shilman closed this as completed May 21, 2020

shilman reopened this May 21, 2020

shilman removed this from the 6.0 breaking milestone May 22, 2020

graup mentioned this issue May 25, 2020

Remove babel-preset-vue #10909

Merged

shilman closed this as completed May 25, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tmeasday commented Oct 18, 2018 •

edited

Loading

tmeasday commented Oct 18, 2018

igor-dv commented Oct 18, 2018

pksunkara commented Oct 18, 2018

tmeasday commented Oct 18, 2018 •

edited

Loading

igor-dv commented Oct 21, 2018

pksunkara commented Oct 21, 2018

igor-dv commented Oct 21, 2018

shilman commented Oct 22, 2018 •

edited

Loading

tmeasday commented Oct 23, 2018 •

edited

Loading

igor-dv commented Oct 23, 2018

tmeasday commented Oct 23, 2018

tmeasday commented Oct 24, 2018

pksunkara commented Oct 28, 2018

fairyly commented Nov 10, 2018

jrtitus commented Nov 12, 2018

bartdominiak commented Nov 17, 2018 •

edited

Loading

igor-dv commented Nov 20, 2018

DaSchTour commented Dec 13, 2018

ndelangen commented Sep 24, 2019

graup commented Sep 24, 2019

ndelangen commented Sep 24, 2019

crusenov commented Sep 24, 2019

breadadams commented Sep 24, 2019

graup commented Feb 26, 2020 •

edited

Loading

shilman commented Feb 26, 2020

pksunkara commented Feb 26, 2020

graup commented Feb 26, 2020

ndelangen commented Feb 27, 2020

shilman commented Mar 7, 2020

graup commented May 20, 2020

shilman commented May 21, 2020

ndelangen commented May 25, 2020

shilman commented May 25, 2020

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

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

Comments

tmeasday commented Oct 18, 2018 • edited Loading

Bug or support request summary

Steps to reproduce

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

Affected platforms

tmeasday commented Oct 18, 2018

igor-dv commented Oct 18, 2018

pksunkara commented Oct 18, 2018

tmeasday commented Oct 18, 2018 • edited Loading

igor-dv commented Oct 21, 2018

pksunkara commented Oct 21, 2018

igor-dv commented Oct 21, 2018

shilman commented Oct 22, 2018 • edited Loading

tmeasday commented Oct 23, 2018 • edited Loading

igor-dv commented Oct 23, 2018

tmeasday commented Oct 23, 2018

tmeasday commented Oct 24, 2018

pksunkara commented Oct 28, 2018

fairyly commented Nov 10, 2018

jrtitus commented Nov 12, 2018

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

bartdominiak commented Nov 17, 2018 • edited Loading

igor-dv commented Nov 20, 2018

DaSchTour commented Dec 13, 2018

ndelangen commented Sep 24, 2019

graup commented Sep 24, 2019

ndelangen commented Sep 24, 2019

crusenov commented Sep 24, 2019

breadadams commented Sep 24, 2019

graup commented Feb 26, 2020 • edited Loading

shilman commented Feb 26, 2020

pksunkara commented Feb 26, 2020

graup commented Feb 26, 2020

ndelangen commented Feb 27, 2020

shilman commented Mar 7, 2020

graup commented May 20, 2020

shilman commented May 21, 2020

ndelangen commented May 25, 2020

shilman commented May 25, 2020

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

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

tmeasday commented Oct 18, 2018 •

edited

Loading

tmeasday commented Oct 18, 2018 •

edited

Loading

shilman commented Oct 22, 2018 •

edited

Loading

tmeasday commented Oct 23, 2018 •

edited

Loading

bartdominiak commented Nov 17, 2018 •

edited

Loading

graup commented Feb 26, 2020 •

edited

Loading