[6.2.0-beta.0] webpack 5 error /webpack-virtual-modules/ #14012

sibelius · 2021-02-22T19:59:18Z

Describe the bug

WARN Unable to close preview build!
  ERR! TypeError: Cannot read property 'data' of undefined
ERR!     at setData (app/node_modules/webpack-virtual-modules/index.js:84:15)
ERR!     at CachedInputFileSystem.finalInputFileSystem._writeVirtualFile (app/node_modules/webpack-virtual-modules/index.js:118:9)
ERR!     at VirtualModulesPlugin.writeModule (app/node_modules/webpack-virtual-modules/index.js:64:24)
ERR!     at app/node_modules/webpack-virtual-modules/index.js:165:14
ERR!     at Array.forEach (<anonymous>)
  ERR!     at afterResolversHook (app/node_modules/webpack-virtual-modules/index.js:164:40)
  ERR!     at Hook.eval [as call] (eval at create (app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    ERR!     at Hook.CALL_DELEGATE [as _call] (app/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    ERR!     at WebpackOptionsApply.process (app/node_modules/webpack/lib/WebpackOptionsApply.js:571:33)
    ERR!     at createCompiler (app/node_modules/webpack/lib/webpack.js:76:28)
    ERR!     at create (app/node_modules/webpack/lib/webpack.js:113:15)
    ERR!     at webpack (app/node_modules/webpack/lib/webpack.js:137:31)
    ERR!     at Object.f [as get] (app/node_modules/webpack/lib/index.js:37:15)
    ERR!     at Object.start (app/node_modules/@storybook/core-server/dist/cjs/manager/builder.js:86:27)
    ERR!     at async Promise.all (index 1)
    ERR!     at async storybookDevServer (app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:105:28)
    ERR!  TypeError: Cannot read property 'data' of undefined
    ERR!     at setData (app/node_modules/webpack-virtual-modules/index.js:84:15)
    ERR!     at CachedInputFileSystem.finalInputFileSystem._writeVirtualFile (app/node_modules/webpack-virtual-modules/index.js:118:9)
    ERR!     at VirtualModulesPlugin.writeModule (app/node_modules/webpack-virtual-modules/index.js:64:24)
    ERR!     at app/node_modules/webpack-virtual-modules/index.js:165:14
    ERR!     at Array.forEach (<anonymous>)
      ERR!     at afterResolversHook (app/node_modules/webpack-virtual-modules/index.js:164:40)
      ERR!     at Hook.eval [as call] (eval at create (app/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
        ERR!     at Hook.CALL_DELEGATE [as _call] (app/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
        ERR!     at WebpackOptionsApply.process (app/node_modules/webpack/lib/WebpackOptionsApply.js:571:33)
        ERR!     at createCompiler (app/node_modules/webpack/lib/webpack.js:76:28)
        ERR!     at create (app/node_modules/webpack/lib/webpack.js:113:15)
        ERR!     at webpack (app/node_modules/webpack/lib/webpack.js:137:31)
        ERR!     at Object.f [as get] (app/node_modules/webpack/lib/index.js:37:15)
        ERR!     at Object.start (app/node_modules/@storybook/core-server/dist/cjs/manager/builder.js:86:27)
        ERR!     at async Promise.all (index 1)
        ERR!     at async storybookDevServer (app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:105:28)

To Reproduce

Install 6.2.0 beta in a monorepo with webpack 5, we does not work with target web neither node, below is the main.js config

module.exports = {
  stories: ['../packages/*/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  webpack: (config) => {
    config.target = 'node',
    config.node = {
      __dirname: false,
      __filename: false,
    };

    return config;
  },
  reactOptions: {
    fastRefresh: true,
    strictMode: true,
  },
  typescript: {
    check: false,
    reactDocgen: false,
  },
};

Steps to reproduce the behavior:
start-storybook -p 9001 -c .storybook

Expected behavior
it should not break

Screenshots
the stacktrace is above

Code snippets
code snippet above

System

System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.4/bin/npm
  npmPackages:
    @storybook/addon-docs: 6.2.0-beta.0 => 6.2.0-beta.0 
    @storybook/addon-options: 6.0.0-alpha.29 => 6.0.0-alpha.29 
    @storybook/react: 6.2.0-beta.0 => 6.2.0-beta.0 
    @storybook/storybook-deployer: 2.8.7 => 2.8.7

Additional context

shilman · 2021-02-22T21:20:31Z

~~Do you have a repro repo you can share?~~

Got a repro here: https://github.com/tonnguyen/storybook-taskbox

VincentLanglet · 2021-02-23T13:05:42Z

I can confirm it's still present in the beta.1.

shilman · 2021-02-23T13:58:08Z

Yup. Open issue = problem hasn't been fixed yet

shilman · 2021-02-24T14:35:25Z

OK, problem solved, at least for the repro https://github.com/tonnguyen/storybook-taskbox

-  "resolutions": {
-    "webpack": "^5.23.0"
-  },

Storybook uses webpack4 to build its "manager" UI (the thing around the user's iframe). When you use yarn resolutions to force it to use webpack5, that breaks. (h/t @igor-dv for the debugging help!)

@sibelius @VincentLanglet are you using resolutions?

sibelius · 2021-02-24T14:54:56Z

we are using resolutions to avoid 2 versions of webpack

sibelius · 2021-02-24T15:08:59Z

Can we always use webpack 5 ?

shilman · 2021-02-24T15:13:48Z

Not currently. We made the preview builder pluggable to switch between webpack4/5, but not the manager builder. Starting in Storybook 7 I expect we'll make webpack5 the default across the board, and users will be able to opt-in to webpack4 for the preview only.

shilman · 2021-02-24T15:26:35Z

Closing this until somebody has a repro that doesn't use yarn resolutions 😂

VincentLanglet · 2021-02-24T15:58:39Z

Not currently. We made the preview builder pluggable to switch between webpack4/5, but not the manager builder. Starting in Storybook 7 I expect we'll make webpack5 the default across the board, and users will be able to opt-in to webpack4 for the preview only.

Having both webpack4 and webpack5 in my nodes_modules is breaking all my webpack builds.
They woks fine when I use

"resolutions": {
    "webpack": "^5.23.0"
},

only storybook is failing.

The release https://github.com/storybookjs/storybook/releases/tag/v6.2.0-beta.0 talk about Webpack 5 support.
I don't think we can consider that storybook support Webpack 5 in these conditions.

sibelius · 2021-02-24T20:01:45Z

can we open an issue about this:

Storybook uses webpack4 to build its "manager" UI (the thing around the user's iframe)

so the community could contribute to make it compatible with both wp 4 and wp 5

without yarn resolutions it breaks everything for us

shilman · 2021-02-24T23:34:02Z

@VincentLanglet it says

Webpack 5 - Experimental support for the latest version of Webpack.

what part of experimental isn't clear?

sibelius · 2021-02-24T23:46:02Z

Check this example

https://github.com/jean-leonco/storybook-webpack-5/blob/main/.storybook/main.js

shilman · 2021-02-24T23:49:24Z

@sibelius I've opened this issue #14044 and am interested to hear more feedback from the community. I would prefer not to add this feature if we can avoid it.

It seems to me that if the user installs webpack5 in his project, that will be the preferred version of webpack, and the webpack4 installation will only exist in Storybook's node_modules folder and won't affect the user's installation at all. So far it's worked that way for all the projects I've tested it with, so I'd like to get to the bottom of why it's not working for you.

shilman · 2021-02-24T23:57:09Z

@sibelius

https://github.com/jean-leonco/storybook-webpack-5/blob/main/.storybook/main.js

If I upgrade to the latest beta and remove the resolution it works fine in Storybook with our without that line.

ntucker · 2021-03-08T18:57:54Z

It seems to me that if the user installs webpack5 in his project, that will be the preferred version of webpack, and the webpack4 installation will only exist in Storybook's node_modules folder and won't affect the user's installation at all. So far it's worked that way for all the projects I've tested it with, so I'd like to get to the bottom of why it's not working for you.

"won't affect the user's installation at all" - this is incorrect as various webpack plugins do version detection to determine how to operate and they get confused by finding webpack 4 in the path.

ntucker · 2021-03-21T03:46:14Z

@shilman Not supporting pmmmwh/react-refresh-webpack-plugin is a pretty big deal. This is the standard way of enabling hotreloading for react. This and many other webpack plugins use version detection.

bradley-varol · 2021-11-19T10:08:09Z

For anyone stumbling across this from Google, here's the official Storybook with Webpack 5 guide:
https://storybook.js.org/blog/storybook-for-webpack-5/

hlolli · 2022-04-30T15:37:39Z

I fixed it by resolving to webpack-virtual-modules 0.4.3 and not 0.2.2

Cf. cypress-io/cypress#19066 & storybookjs/storybook#14012

eden-lane · 2023-04-07T21:42:01Z

Excuse me, why is is closed? I still have this issue on storybook 7.0.2

shilman added question / support builder-webpack5 needs reproduction labels Feb 22, 2021

shilman added bug P0 and removed needs reproduction question / support labels Feb 22, 2021

shilman closed this as completed Feb 24, 2021

This was referenced Feb 24, 2021

Cannot read property 'tap' of undefined symfony/webpack-encore#942

Closed

Storybook 6.2 Release 🤝 #13160

Closed

yjaaidi added a commit to marmicode/marmicode that referenced this issue Jul 18, 2022

test: ✅ fix cypress tests

c1e114b

Cf. cypress-io/cypress#19066 & storybookjs/storybook#14012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[6.2.0-beta.0] webpack 5 error /webpack-virtual-modules/ #14012

[6.2.0-beta.0] webpack 5 error /webpack-virtual-modules/ #14012

sibelius commented Feb 22, 2021

shilman commented Feb 22, 2021 •

edited

Loading

VincentLanglet commented Feb 23, 2021

shilman commented Feb 23, 2021

shilman commented Feb 24, 2021 •

edited

Loading

sibelius commented Feb 24, 2021

sibelius commented Feb 24, 2021

shilman commented Feb 24, 2021

shilman commented Feb 24, 2021

VincentLanglet commented Feb 24, 2021

sibelius commented Feb 24, 2021

shilman commented Feb 24, 2021

sibelius commented Feb 24, 2021

shilman commented Feb 24, 2021

shilman commented Feb 24, 2021

ntucker commented Mar 8, 2021

ntucker commented Mar 21, 2021

bradley-varol commented Nov 19, 2021 •

edited

Loading

hlolli commented Apr 30, 2022

eden-lane commented Apr 7, 2023 •

edited

Loading

[6.2.0-beta.0] webpack 5 error /webpack-virtual-modules/ #14012

[6.2.0-beta.0] webpack 5 error /webpack-virtual-modules/ #14012

Comments

sibelius commented Feb 22, 2021

shilman commented Feb 22, 2021 • edited Loading

VincentLanglet commented Feb 23, 2021

shilman commented Feb 23, 2021

shilman commented Feb 24, 2021 • edited Loading

sibelius commented Feb 24, 2021

sibelius commented Feb 24, 2021

shilman commented Feb 24, 2021

shilman commented Feb 24, 2021

VincentLanglet commented Feb 24, 2021

sibelius commented Feb 24, 2021

shilman commented Feb 24, 2021

sibelius commented Feb 24, 2021

shilman commented Feb 24, 2021

shilman commented Feb 24, 2021

ntucker commented Mar 8, 2021

ntucker commented Mar 21, 2021

bradley-varol commented Nov 19, 2021 • edited Loading

hlolli commented Apr 30, 2022

eden-lane commented Apr 7, 2023 • edited Loading

shilman commented Feb 22, 2021 •

edited

Loading

shilman commented Feb 24, 2021 •

edited

Loading

bradley-varol commented Nov 19, 2021 •

edited

Loading

eden-lane commented Apr 7, 2023 •

edited

Loading