Vue start-storybook on existing project: Error: Cannot find module '@vue/babel-preset-app'

[saschwarz]

Describe the bug

Installed storybook via npx sb init in an existing Vue 2.x application without errors.

Ran yarn run storybook and get errors that Error: Cannot find module '@vue/babel-preset-app'

To Reproduce
Steps to reproduce the behavior:

1. Installed storybook via npx sb init in an existing Vue 2.x application without errors.
2. Ran yarn run storybook and get errors that Error: Cannot find module '@vue/babel-preset-app'

Expected behavior
Storybook runs and displays site w/o errors.

start-storybook Output

> yarn run storybook
$ start-storybook -p 6006
info @storybook/vue v6.1.17
info 
info => Using prebuilt manager
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using custom .postcssrc.js
info => Using default Webpack setup
webpack built fbdabffb576db2d8cfba in 9097ms
✖ ｢wdm｣: Hash: fbdabffb576db2d8cfba
Version: webpack 4.46.0
Time: 9097ms
Built at: 02/09/2021 11:11:44 AM
                                          Asset       Size        Chunks                                Chunk Names
                                    iframe.html   4.38 KiB                [emitted]                     
            main.fbdabffb576db2d8cfba.bundle.js   18.6 KiB          main  [emitted] [immutable]         main
        main.fbdabffb576db2d8cfba.bundle.js.map  326 bytes          main  [emitted] [dev]               main
    runtime~main.fbdabffb576db2d8cfba.bundle.js   33.5 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.fbdabffb576db2d8cfba.bundle.js.map   34.7 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.fbdabffb576db2d8cfba.bundle.js   8.54 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.fbdabffb576db2d8cfba.bundle.js.map   7.97 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.fbdabffb576db2d8cfba.bundle.js runtime~main.fbdabffb576db2d8cfba.bundle.js.map vendors~main.fbdabffb576db2d8cfba.bundle.js vendors~main.fbdabffb576db2d8cfba.bundle.js.map main.fbdabffb576db2d8cfba.bundle.js main.fbdabffb576db2d8cfba.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 172 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 3.62 KiB {main} [built] [failed] [1 error]
[./.storybook/preview.js-generated-config-entry.js] 3.62 KiB {main} [built] [failed] [1 error]
[./.storybook/storybook-init-framework-entry.js] 3.62 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js] 2.38 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js] 2.47 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js] 2.47 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js] 2.48 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js] 2.48 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js] 2.48 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js] 2.47 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js] 2.47 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] 7.68 KiB {vendors~main} [built]
    + 2597 hidden modules

ERROR in ./.storybook/storybook-init-framework-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@vue/babel-preset-app'
Require stack:
- /Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/me/app/node_modules/@babel/core/lib/config/files/index.js
- /Users/me/app/node_modules/@babel/core/lib/index.js
- /Users/me/app/node_modules/babel-loader/lib/index.js
- /Users/me/app/node_modules/loader-runner/lib/loadLoader.js
- /Users/me/app/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js
- /Users/me/app/node_modules/@storybook/core/dist/server/build-static.js
- /Users/me/app/node_modules/@storybook/core/server.js
- /Users/me/app/node_modules/@storybook/vue/dist/server/index.js
- /Users/me/app/node_modules/@storybook/vue/bin/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at resolve (internal/modules/cjs/helpers.js:83:19)
    at resolveStandardizedName (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:100:7)
    at resolvePreset (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:48:10)
    at loadPreset (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:67:20)
    at createDescriptor (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:416:26)
    at /Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:374:7
    at Generator.next (<anonymous>)
    at loadFileChain (/Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:228:24)
    at loadFileChain.next (<anonymous>)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined main[2]

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@vue/babel-preset-app'
Require stack:
- /Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/me/app/node_modules/@babel/core/lib/config/files/index.js
- /Users/me/app/node_modules/@babel/core/lib/index.js
- /Users/me/app/node_modules/babel-loader/lib/index.js
- /Users/me/app/node_modules/loader-runner/lib/loadLoader.js
- /Users/me/app/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js
- /Users/me/app/node_modules/@storybook/core/dist/server/build-static.js
- /Users/me/app/node_modules/@storybook/core/server.js
- /Users/me/app/node_modules/@storybook/vue/dist/server/index.js
- /Users/me/app/node_modules/@storybook/vue/bin/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at resolve (internal/modules/cjs/helpers.js:83:19)
    at resolveStandardizedName (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:100:7)
    at resolvePreset (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:48:10)
    at loadPreset (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:67:20)
    at createDescriptor (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:416:26)
    at /Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:374:7
    at Generator.next (<anonymous>)
    at loadFileChain (/Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:228:24)
    at loadFileChain.next (<anonymous>)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined main[10]

ERROR in ./.storybook/generated-stories-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@vue/babel-preset-app'
Require stack:
- /Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/me/app/node_modules/@babel/core/lib/config/files/index.js
- /Users/me/app/node_modules/@babel/core/lib/index.js
- /Users/me/app/node_modules/babel-loader/lib/index.js
- /Users/me/app/node_modules/loader-runner/lib/loadLoader.js
- /Users/me/app/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js
- /Users/me/app/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js
- /Users/me/app/node_modules/@storybook/core/dist/server/build-static.js
- /Users/me/app/node_modules/@storybook/core/server.js
- /Users/me/app/node_modules/@storybook/vue/dist/server/index.js
- /Users/me/app/node_modules/@storybook/vue/bin/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at resolve (internal/modules/cjs/helpers.js:83:19)
    at resolveStandardizedName (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:100:7)
    at resolvePreset (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:48:10)
    at loadPreset (/Users/me/app/node_modules/@babel/core/lib/config/files/plugins.js:67:20)
    at createDescriptor (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/me/app/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:416:26)
    at /Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:374:7
    at Generator.next (<anonymous>)
    at loadFileChain (/Users/me/app/node_modules/@babel/core/lib/config/config-chain.js:228:24)
    at loadFileChain.next (<anonymous>)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined main[11]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.35 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I checked and the package appears to be installed:

# yarn list | grep babel-preset
│  ├─ babel-preset-minify@^0.5.0 || 0.6.0-alpha.5
├─ @vue/babel-preset-app@4.5.9
│  ├─ @vue/babel-preset-jsx@^1.1.2
├─ @vue/babel-preset-jsx@1.2.4
│  ├─ @vue/babel-preset-app@^4.5.9
│  ├─ babel-preset-jest@^24.9.0
├─ babel-preset-jest@24.9.0
├─ babel-preset-minify@0.5.1

System

/app# npx sb@next info

Environment Info:

  System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (4) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.1.17 => 6.1.17 
    @storybook/addon-essentials: ^6.1.17 => 6.1.17 
    @storybook/addon-links: ^6.1.17 => 6.1.17 
    @storybook/vue: ^6.1.17 => 6.1.17

Additional context
None

[saschwarz]

yarn add -D @vue/babel-preset-app solved this - but I'm not sure why it had to be re-installed.