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
- test: ✅ fix cypress tests Cf. https://github.com/cypress-io/cypress/issues/19066 & https://github.com/storybookjs/storybook/issues/14012 — committed to marmicode/marmicode by yjaaidi 2 years ago
Yup. Open issue = problem hasn’t been fixed yet
can we open an issue about this:
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
“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