storybook: [6.2.0-beta.0] webpack 5 error /webpack-virtual-modules/

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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 6
  • Comments: 19 (8 by maintainers)

Commits related to this issue

Most upvoted comments

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

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

Excuse me, why is is closed? I still have this issue on storybook 7.0.2 CleanShot 2023-04-08 at 00 43 15@2x

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.

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

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.

Do you have a repro repo you can share?

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