storybook: 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.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 9
Comments: 15 (2 by maintainers)

Most upvoted comments

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

Thanks @daviesdoclc

+20

isdevpro on Mar 21, 2022

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

uoc1691 on Aug 16, 2022

npx sb init --builder webpack5 Also worked for me but only after a full project reset, so git reset --hard; git clean -fd, them deleting and reinstalling node_modules. Finally, npx sb init --builder webpack5 worked and get Storybook running in an existing Vue 3 project.

garylake on Apr 5, 2022

npx sb init --builder webpack5 worked for me. I would like to add some details. I had to remove the @storybook/vue3 dependency from the package.json, remove my node_modules and package-lock.json, run npm i and THEN run npx sb init --builder webpack5. I also had to modify the .storybook/main.js:

const path = require('path');

module.exports = {
  ...,
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
}

arthur-fontaine on May 12, 2022

I just tried the directions here https://storybook.js.org/blog/storybook-for-webpack-5/ and it started up for me.

daviesdoclc on Mar 18, 2022