[Bug]: Crash — ModuleDependencyWarning during smoke-test build

[jleider]

Describe the bug

There was a change introduced in beta 53 and exists up till the latest version available at this time (7.0.6) which causes the following errors. Previous beta versions do not exhibit this issue.

Running with the --smoke-test flag is enough to produce this error. This does not happen with the --ci flag or running the normal build.

yarn storybook --smoke-test

@storybook/cli v7.0.0-beta.53

info => Serving static files from ./../node_modules/@storybook/manager/static at /sb-common-assets
info => Starting manager..
info => Using PostCSS preset with postcss@7.0.39
info Addon-docs: using MDX2
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
[
  'ModuleDependencyWarning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted\n' +
    '    at Compilation.reportDependencyErrorsAndWarnings (/src/node_modules/webpack/lib/Compilation.js:3137:23)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/Compilation.js:2729:28)\n' +
    '    at eval (eval at create (/src/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:42:1)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11)\n' +
    '    at <anonymous> (/src/node_modules/neo-async/async.js:2830:7)\n' +
    '    at Object.each2 (/src/node_modules/neo-async/async.js:2850:39)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:361:18)\n' +
    '    at <anonymous> (/src/node_modules/neo-async/async.js:2830:7)\n' +
    '    at Object.each2 (/src/node_modules/neo-async/async.js:2850:39)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:51:16)',
  'ModuleDependencyWarning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted\n' +
    '    at Compilation.reportDependencyErrorsAndWarnings (/src/node_modules/webpack/lib/Compilation.js:3137:23)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/Compilation.js:2729:28)\n' +
    '    at eval (eval at create (/src/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:42:1)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11)\n' +
    '    at <anonymous> (/src/node_modules/neo-async/async.js:2830:7)\n' +
    '    at Object.each2 (/src/node_modules/neo-async/async.js:2850:39)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:361:18)\n' +
    '    at <anonymous> (/src/node_modules/neo-async/async.js:2830:7)\n' +
    '    at Object.each2 (/src/node_modules/neo-async/async.js:2850:39)\n' +
    '    at <anonymous> (/src/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:51:16)'
]

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 3.2.2 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 111.0.1
    Safari: 16.3

Additional context

No response

[hctom]

We have exactly the same issue. I just tried it with a fresh Storybook install:

• npx storybook@latest init
• Select custom project type: html (I also tested it with react -> same result)
• Do not create .babelrc.json file (I also tested with creating the .babelrc.json file and even with Typescript support -> same result)
• Change test script entry in package.json to: yarn storybook dev --smoke-test
• Run yarn test
• The above mentioned error occurs

Does anybody have a workaround already for this? I'd appreciate your feedback. Thanks!

[hctom]

I just updated to Storybook 7.0.8 - this seems to solve the issue. yarn storybook dev --smoke-test works again without the above mentioned errors

[jleider]

Confirmed this is now working again with 7.0.11.

[asbjornu]

Weird. I'm getting this error with Storybook 7.4.1.

  'ModuleDependencyWarning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted\n' +
    '    at Compilation.reportDependencyErrorsAndWarnings (./node_modules/webpack/lib/Compilation.js:3145:23)\n' +
    '    at ./node_modules/webpack/lib/Compilation.js:2737:28\n' +
    '    at eval (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)\n' +
    '    at ./node_modules/webpack/lib/FlagDependencyExportsPlugin.js:380:10\n' +
    '    at ./node_modules/neo-async/async.js:2830:7\n' +
    '    at Object.each (./node_modules/neo-async/async.js:2850:39)\n' +
    '    at ./node_modules/webpack/lib/FlagDependencyExportsPlugin.js:356:17\n' +
    '    at ./node_modules/neo-async/async.js:2830:7\n' +
    '    at Object.each (./node_modules/neo-async/async.js:2850:39)\n' +
    '    at ./node_modules/webpack/lib/FlagDependencyExportsPlugin.js:50:15\n' +
    '    at Hook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:1)\n' +
    '    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (./node_modules/tapable/lib/Hook.js:18:14)\n' +
    '    at Compilation.finish (./node_modules/webpack/lib/Compilation.js:2722:28)\n' +
    '    at ./node_modules/webpack/lib/Compiler.js:1186:19\n' +
    '    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)',
  'ModuleDependencyWarning: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted\n' +
    '    at Compilation.reportDependencyErrorsAndWarnings (./node_modules/webpack/lib/Compilation.js:3145:23)\n' +
    '    at ./node_modules/webpack/lib/Compilation.js:2737:28\n' +
    '    at eval (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)\n' +
    '    at ./node_modules/webpack/lib/FlagDependencyExportsPlugin.js:380:10\n' +
    '    at ./node_modules/neo-async/async.js:2830:7\n' +
    '    at Object.each (./node_modules/neo-async/async.js:2850:39)\n' +
    '    at ./node_modules/webpack/lib/FlagDependencyExportsPlugin.js:356:17\n' +
    '    at ./node_modules/neo-async/async.js:2830:7\n' +
    '    at Object.each (./node_modules/neo-async/async.js:2850:39)\n' +
    '    at ./node_modules/webpack/lib/FlagDependencyExportsPlugin.js:50:15\n' +
    '    at Hook.eval [as callAsync] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:1)\n' +
    '    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (./node_modules/tapable/lib/Hook.js:18:14)\n' +
    '    at Compilation.finish (./node_modules/webpack/lib/Compilation.js:2722:28)\n' +
    '    at ./node_modules/webpack/lib/Compiler.js:1186:19\n' +
    '    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)'