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.