TypeError: Cannot read property 'NormalModule' of undefined

Describe the bug I initialized a project with vue-cli, and then executed the npx sb init --type vue3 command and ran npm run storybook after the command was executed and an error was reported

To Reproduce PS E:\web-work-space\ying-ui> npm run storybook

ying-ui@0.1.0 storybook E:\web-work-space\ying-ui start-storybook -p 6006

info @storybook/vue3 v6.4.19 info info => Loading presets info => Using implicit CSS loaders info => Using default Webpack4 setup ERR! TypeError: Cannot read property ‘NormalModule’ of undefined ERR! at VueLoaderPlugin.apply (E:\web-work-space\ying-ui\node_modules\vue-loader\dist\pluginWebpack5.js:44:47) ERR! at webpack (E:\web-work-space\ying-ui\node_modules@storybook\builder-webpack4\node_modules\webpack\lib\webpack.js:51:13) ERR! at Object.start (E:\web-work-space\ying-ui\node_modules@storybook\builder-webpack4\dist\cjs\index.js:92:18) ERR! at async Promise.all (index 0) ERR! at async storybookDevServer (E:\web-work-space\ying-ui\node_modules@storybook\core-server\dist\cjs\dev-server.js:126:28) ERR! at async buildDevStandalone (E:\web-work-space\ying-ui\node_modules@storybook\core-server\dist\cjs\build-dev.js:115:31) ERR! at async buildDev (E:\web-work-space\ying-ui\node_modules@storybook\core-server\dist\cjs\build-dev.js:161:5) ERR! TypeError: Cannot read property ‘NormalModule’ of undefined ERR! at VueLoaderPlugin.apply (E:\web-work-space\ying-ui\node_modules\vue-loader\dist\pluginWebpack5.js:44:47) ERR! at webpack (E:\web-work-space\ying-ui\node_modules@storybook\builder-webpack4\node_modules\webpack\lib\webpack.js:51:13) ERR! at Object.start (E:\web-work-space\ying-ui\node_modules@storybook\builder-webpack4\dist\cjs\index.js:92:18) ERR! at async Promise.all (index 0) ERR! at async storybookDevServer (E:\web-work-space\ying-ui\node_modules@storybook\core-server\dist\cjs\dev-server.js:126:28) ERR! at async buildDevStandalone (E:\web-work-space\ying-ui\node_modules@storybook\core-server\dist\cjs\build-dev.js:115:31) ERR! at async buildDev (E:\web-work-space\ying-ui\node_modules@storybook\core-server\dist\cjs\build-dev.js:161:5) { ERR! stack: “TypeError: Cannot read property ‘NormalModule’ of undefined\n” + ERR! ’ at VueLoaderPlugin.apply (E:\web-work-space\ying-ui\node_modules\vue-loader\dist\pluginWebpack5.js:44:47)\n’ + ERR! ’ at webpack (E:\web-work-space\ying-ui\node_modules\@storybook\builder-webpack4\node_modules\webpack\lib\webpack.js:51:13)\n’ + ERR! ’ at Object.start (E:\web-work-space\ying-ui\node_modules\@storybook\builder-webpack4\dist\cjs\index.js:92:18)\n’ + ERR! ’ at async Promise.all (index 0)\n’ + ERR! ’ at async storybookDevServer (E:\web-work-space\ying-ui\node_modules\@storybook\core-server\dist\cjs\dev-server.js:126:28)\n’ + ERR! ’ at async buildDevStandalone (E:\web-work-space\ying-ui\node_modules\@storybook\core-server\dist\cjs\build-dev.js:115:31)\n’ + ERR! ’ at async buildDev (E:\web-work-space\ying-ui\node_modules\@storybook\core-server\dist\cjs\build-dev.js:161:5)’ 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! ying-ui@0.1.0 storybook: start-storybook -p 6006 npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ying-ui@0.1.0 storybook script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Admin\AppData\Roaming\npm-cache_logs\2022-03-17T15_35_09_997Z-debug.log System Environment Info:

System: OS: Windows 10 10.0.22000 CPU: (16) x64 12th Gen Intel® Core™ i5-12600KF Binaries: Node: 12.16.0 - D:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - D:\Program Files\npm\yarn.CMD npm: 6.13.4 - D:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.39)

Additional context Add any other context about the problem here.

[isdevpro]

I have the same problem, fixed with: npx sb init --builder webpack5

Thanks @daviesdoclc

[uoc1691]

The Solution worked for me

Backgroud: Project is upgraded to use Webpack 5. No need for Webpack 4.

If you see the error, it’s referring to builder-webpack4.

Fix: Install @storybook/manager-webpack5 and @storybook/builder-webpack5 as dev dependencies. Modify main.js and specify webpack5 as the builder.

core: {
    builder: {
      name: 'webpack5'
    }
  }