Storybook 6.5 does not work with vue 3

[bodograumann]

Describe the bug
When trying to create a storybook reproduction setup, even the default vue 3 configuration does not work. It shows the following error:

ERR! TypeError: Cannot read properties of undefined (reading 'NormalModule')
ERR!     at VueLoaderPlugin.apply (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/vue3/node_modules/vue-loader/dist/pluginWebpack5.js:44:47)
ERR!     at webpack (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/webpack/lib/webpack.js:51:13)
ERR!     at starterGeneratorFn (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:137:18)
ERR!     at starterGeneratorFn.next (<anonymous>)
ERR!     at Object.start (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:275:34)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  TypeError: Cannot read properties of undefined (reading 'NormalModule')
ERR!     at VueLoaderPlugin.apply (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/vue3/node_modules/vue-loader/dist/pluginWebpack5.js:44:47)
ERR!     at webpack (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/webpack/lib/webpack.js:51:13)
ERR!     at starterGeneratorFn (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:137:18)
ERR!     at starterGeneratorFn.next (<anonymous>)
ERR!     at Object.start (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:275:34)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/home/bodo/Experiments/storybook-6.5-vue3/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)

To Reproduce
Execute npx "sb@^6.5" repro to create a storybook 6.5 and select the vue 3 template.
Start the storybook server with yarn storybook.

I have published such an example here: https://github.com/bodograumann/storybook-6.5-vue3

System

> npx sb@next info
Need to install the following packages:
  sb@next
Ok to proceed? (y)
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

Environment Info:

  System:
    OS: Linux 5.17 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
  Binaries:
    Node: 16.15.0 - /usr/bin/node
    Yarn: 3.2.1 - ~/.local/bin/yarn
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Firefox: 100.0
  npmPackages:
    @storybook/addon-actions: ^6.5.0 => 6.5.0
    @storybook/addon-docs: ^6.5.0 => 6.5.0
    @storybook/addon-essentials: ^6.5.0 => 6.5.0
    @storybook/addon-interactions: ^6.5.0 => 6.5.0
    @storybook/addon-links: ^6.5.0 => 6.5.0
    @storybook/builder-webpack4: ^6.5.0 => 6.5.0
    @storybook/manager-webpack4: ^6.5.0 => 6.5.0
    @storybook/testing-library: ^0.0.11 => 0.0.11
    @storybook/vue3: ^6.5.0 => 6.5.0
  npmGlobalPackages:
    @storybook/cli: 6.5.0

[symmetriq]

I'm seeing exactly the same error here after upgrading to Storybook 6.5.0 in a Vue 3 project.

[xorinzor]

Any chance my issue might be related? #18271
edit: turned out to be (likely) an environment issue.

[Simolation]

When using https://github.com/storybookjs/builder-vite the issue is gone, and it works, but also had the same crash when upgrading from 6.4 to 6.5. Luckily, I already intended to move to Vite, as everything else in the project is using Vite.

[shilman]

@yannbf looks like perhaps the last-minute webpack5 autodetection code broke vue3. you can see that @bodograumann 's repro is using builder/manager-webpack4. can you please look into this today? thanks! 🙏

[yannbf]

Hey @bodograumann thank you so much for opening this issue, even more for providing a repro. I'm on it!

[yannbf]

Alright so the reason this is happening is because vue-loader provides both webpack4Plugin and webpack5Plugin, then checks the version of webpack to know which plugin to use. When requiring webpack, it will get it from <rootDir>/node_modules/@storybook/vue3/node_modules/webpack, and because the dependency version range for webpack was expanded, the webpack installed under @storybook/vue3 will be the latest (5.72.1 as of now). Even if the builder is defined as webpack4 in Storybook, the vue-loader plugin will end up using its webpack5 implementation, which will break.

[ndelangen]

1 work around would be to provide a resolution in package.json for webpack, I guess.

[ndelangen]

The version range of storybook allows for both:

storybook/app/vue3/package.json

Line 67 in de741e3

"webpack": ">=4.0.0 <6.0.0"

The issue is that the package manager doesn't seem to install the same version as the user specified? Instead opting to install a newer version because it's technically allowed by storybook.

We could change it to a peerDependency, but does that change anything? NPM installs peerDependencies by default, and yarn with pnp enabled will start complaining if the user doesn't have a direct dependency on webpack at all.

It feels like that will not solve the issue at all, and potentially make it worse?

[uoc1691]

Having this issue when upgrading from 6.4 to 6.5.

[uoc1691]

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

[symmetriq]

Thanks @uoc1691 — I've got Storybook 6.5.12 working with Vue 3 now.

[bodograumann]

We have been successfully using storybook 7.0 for some time now, so I am going to close this.

Note to future self: If weird things happen try rm node_modules package-lock.json -r, though I hope with the new bundling strategy in storybook this will be necessary far less often.