[Bug]: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted.

[stephenliang]

Describe the bug

After upgrading to Storybook 7.6, the following error occurs originating from @storybook/addon-actions/dist/index.js during webpack compilation. This error does not occur in Storybook 7.5.3.

  {
    moduleIdentifier: '/home/sliang/git-workspaces/apps/node_modules/@storybook/addon-actions/dist/index.js',
    moduleName: './node_modules/@storybook/addon-actions/dist/index.js',
    loc: '8:415-422',
    message: 'Critical dependency: require function is used in a way in which dependencies cannot be statically extracted',
    moduleId: './node_modules/@storybook/addon-actions/dist/index.js',
    moduleTrace: [ [Object], [Object], [Object], [Object] ]
}

After further inspection, this error appears to stem from the same code that calls __require in @storybook/addon-actions/dist/index.js and appears to be the same root cause from a previous bug report #21316 . I can see the following code in @storybook/addon-actions/dist/index.js:

var __require = (x => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(x, {get: (a, b) => (typeof require < "u" ? require : a)[b]}) : x)(function (x) {
    if (typeof require < "u") return require.apply(this, arguments);
    throw Error('Dynamic require of "' + x + '" is not supported')
});

__require appears to be used for importing @storybook/global and @storybook/core-events and these were introduced in the "warn on implicit actions" feature that was added in Storybook 7.6.

Rolling back to 7.5.3 appears to fix this issue. Additionally, Storybook version 7.6.0-alpha.6 also compiles correctly as it does not appear to have the aforementioned commit.

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: Linux 6.7 Fedora Linux 39 (Workstation Edition)
    CPU: (6) x64 AMD FX(tm)-6300 Six-Core Processor
    Shell: 3.7.0 - /usr/bin/fish
  Binaries:
    Node: 18.16.0 - ~/.local/share/nvm/v18.16.0/bin/node
    Yarn: 3.6.3 - ~/.local/share/nvm/v18.16.0/bin/yarn <----- active
    npm: 9.5.1 - ~/.local/share/nvm/v18.16.0/bin/npm
  Browsers:
    Chrome: 121.0.6167.160
  npmPackages:
    @storybook/addon-a11y: ^7.5.3 => 7.6.17 
    @storybook/addon-essentials: ^7.5.3 => 7.6.17 
    @storybook/core-common: ^7.5.3 => 7.6.17 
    @storybook/csf-tools: ^7.5.3 => 7.6.17 
    @storybook/react: ^7.5.3 => 7.6.17 
    @storybook/react-webpack5: ^7.5.3 => 7.6.17 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.5.3 => 7.6.17 
    storybook-addon-rtl: ^1.0.0 => 1.0.0 

### Additional context

Versions affected: 7.6.0-alpha.7 or greater
Versions not affected: 7.5.3 and 7.6.0-alpha.6 or lower

[valentinpalkovic]

Does the issue still exist in the latest Storybook 8.0-RC? Run npx storybook@next upgrade to upgrade your Storybook.

[stephenliang]

This bug does not exist in Storybook 8.0.0-rc.2.