a bug with webpack5 with vue framework in storubook/vue:6.3.0-alpha.17

[wlgmy]

step1: npx sb@next init --builder webpack5
step2: Please choose a project type from the following list: › vue3
step3: npm run storybook
then,I got this error:

info @storybook/vue3 v6.3.0-alpha.17
info
info => Loading presets
info => Loading 1 config file in "/Users/wanglong/Desktop/test/test_sb_vue3_w5/.storybook"
info => Loading 7 other files in "/Users/wanglong/Desktop/test/test_sb_vue3_w5/.storybook"
info => Adding stories defined in "/Users/wanglong/Desktop/test/test_sb_vue3_w5/.storybook/main.js"
info => Using prebuilt manager
ERR! Error: Cannot find module 'vue/dist/vue.esm-bundler.js'
ERR! Require stack:
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core/server.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/index.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/bin/index.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:94:19)
ERR! at Object.webpack (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js:43:23)
ERR! at /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR! at async Object.start (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:71:16)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR! at async buildDevStandalone (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR! at async buildDev (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)
ERR! Error: Cannot find module 'vue/dist/vue.esm-bundler.js'
ERR! Require stack:
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core/server.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/index.js
ERR! - /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/bin/index.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR! at Function.resolve (internal/modules/cjs/helpers.js:94:19)
ERR! at Object.webpack (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js:43:23)
ERR! at /Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/presets.js:274:28
ERR! at async Object.start (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:71:16)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR! at async buildDevStandalone (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR! at async buildDev (/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5) {
ERR! code: 'MODULE_NOT_FOUND',
ERR! requireStack: [
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core/dist/cjs/server.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/core/server.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/dist/cjs/server/index.js',
ERR! '/Users/wanglong/Desktop/test/test_sb_vue3_w5/node_modules/@storybook/vue3/bin/index.js'
ERR! ]
ERR! }

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

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test_sb_vue3_w5@1.0.0 storybook: start-storybook -p 6006
npm ERR! Exit status 1

[javisperez]

@wlgmy did you find any workaround for this? facing the same issue.

[shilman]

@wigmy @javisperez Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. We prioritize issues with reproductions over those without. Thank you! 🙏

[wlgmy]

I resolve this issue with npm i webpack@5 -D

[javisperez]

@shilman thanks for the follow up, in my case I was missing Vue overall, for some reason, vue was on my package.json but when doing npm i it wasn't install 🤷 . I installed vue (even though it was in the package json) and the problem solved.