[Bug]: 'Dynamic require of "@storybook/global" is not supported' error when upgraded to v7.6.3

[harryyaprakov]

Describe the bug

When we upgraded all our @storybook/ packages from 7.5.2 to 7.6.3 and then ran a storybook project, we got this error:
'Dynamic require of "@storybook/global" is not supported'

Nothing else has been changed on our side, thus am reporting it as a potential issue from your side.

To Reproduce

Purge package-lock and node_modules and update used sb packages to 7.6.3 then run a storybook in dev or build you should immediately get this error when you open the browser.

System

Storybook Environment Info:
  System:
    OS: macOS 14.1.2
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm <----- active
    pnpm: 8.10.2 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.62
    Safari: 17.1.2
  npmGlobalPackages:
    @storybook/react: 7.4.5
    storybook: 7.5.2

Additional context

we are using react with vite builder for storybook

[pachuka]

Running into similar but different error with same scenario of upgrading from 7.5.2 -> 7.6.3: Cannot find module '@storybook/global' after storybook is started up and trying to load a preview. I can reproduce this from 7.6.0 onwards.

Interestingly enough didn't see this in another repo we have that was on 7.0.x -> 7.6.3 so that's odd.

Edit: using node 20/npm 10, react 18, w/ webpack 5

[raymondluong]

Also running into the same issue trying to upgrade 7.5.3 to 7.6.3. I suspect the root issue is the same and the different error message format stems from vite vs webpack.

Tried explicitly adding @storybook/global to devDependencies in package.json, same issue

Storybook Environment Info:

  System:
    OS: macOS 14.1.2
    CPU: (16) arm64 Apple M3 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/Library/Caches/fnm_multishells/1640_1701451614912/bin/node
    Yarn: 3.6.1 - ~/Library/Caches/fnm_multishells/1640_1701451614912/bin/yarn <----- active
    npm: 9.8.1 - ~/Library/Caches/fnm_multishells/1640_1701451614912/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 17.1.2
  npmPackages:
    @storybook/addon-a11y: ~7.6.3 => 7.6.3
    @storybook/addon-essentials: ~7.6.3 => 7.6.3
    @storybook/addon-interactions: ~7.6.3 => 7.6.3
    @storybook/addons: ~7.6.3 => 7.6.3
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/react: ~7.6.3 => 7.6.3
    @storybook/react-webpack5: ~7.6.3 => 7.6.3
    @storybook/testing-library: ^0.2.2 => 0.2.2
    @storybook/theming: ~7.6.3 => 7.6.3
    chromatic: 7.4.0 => 7.4.0
    storybook: 7.6.3 => 7.6.3
    storybook-react-router: ^1.0.8 => 1.0.8

[pascalduez]

Hello,

same issue here

Cannot find module '@storybook/global'

webpackEmptyContext@http://localhost:1337/node_modules_storybook_addon-actions_dist_sync_recursive-libs_ui_src_components_Alert_Alert_s-9237db.bundle.js:10:10
../../lib/channels/dist/index.js@http://localhost:1337/vendors-node_modules_storybook_addon-actions_dist_index_js.bundle.js:34:21335
./node_modules/@storybook/addon-actions/dist/index.js/__commonJS/<@http://localhost:1337/vendors-node_modules_storybook_addon-actions_dist_index_js.bundle.js:19:727
./node_modules/@storybook/addon-actions/dist/index.js@http://localhost:1337/vendors-node_modules_storybook_addon-actions_dist_index_js.bundle.js:34:30716
options.factory@http://localhost:1337/runtime~main.iframe.bundle.js:669:31
__webpack_require__@http://localhost:1337/runtime~main.iframe.bundle.js:28:33
fn@http://localhost:1337/runtime~main.iframe.bundle.js:326:21
../libs/ui/src/components/Alert/Alert.stories.js@http://localhost:1337/node_modules_storybook_addon-actions_dist_sync_recursive-libs_ui_src_components_Alert_Alert_s-9237db.bundle.js:34:101
options.factory@http://localhost:1337/runtime~main.iframe.bundle.js:669:31
__webpack_require__@http://localhost:1337/runtime~main.iframe.bundle.js:28:33
fn@http://localhost:1337/runtime~main.iframe.bundle.js:326:21

Storybook Environment Info:                                                           
                                                                                      
  System:                                                                             
    OS: Linux                       
    CPU:                         
    Shell: 3.6.1 - /usr/bin/fish                                                      
  Binaries:                                                                           
    Node: 18.18.2 - /tmp/xfs-af80f7bb/node                                            
    Yarn: 3.6.1 - /tmp/xfs-af80f7bb/yarn <----- active                                
    npm: 9.8.1 - /run/user/1000/fnm_multishells/289349_1701443481879/bin/npm          
  Browsers:                                                                           
    Chrome: 121.0.6129.0                                                              
  npmPackages:                                                                        
    @storybook/addon-essentials: ^7.6.3 => 7.6.3                                      
    @storybook/addon-links: ^7.6.3 => 7.6.3                                           
    @storybook/react: ^7.6.3 => 7.6.3                                                 
    @storybook/react-webpack5: ^7.6.3 => 7.6.3                                        
    storybook: ^7.6.3 => 7.6.3                                                        
    storybook-router: 0.2.9 => 0.2.9                                                  

[pascalduez]

Actually the issue seems to be with the addon-actions plugin, if I remove it from the erroring stories, they load just fine.

[joeycozza]

I am getting the same error message when loading up storybook. I was able to pin it down to a 3rd party library that is pretty out of date.

If I remove usage of storybook-react-router then storybook loads as expected.

Looking at storybook-react-router, they have an old dependency on addon-actions.

 "@storybook/addon-actions": "^4.0.9||^5.0.2||5.2.0-beta.13",

Running npm ls @storybook/addon-actions shows that the version is invalid, but also deduped. So I assume it is just not playing nicely.

So to help troubleshoot your own setup, try running npm ls @storybook/addon-actions or yarn why @storybook/addon-actions and see if there are weird/wrong versions.

Update: I also had to remove import '@storybook/addon-console' from my preview.tsx file. Not sure why yet.

[jesse-savary]

Pinning @storybook/addon-actions to 7.5.x solved the issue for me:

{
  ...
  "pnpm": {
    "overrides": {
      "@storybook/addon-actions": "~7.5"
    }
  }
}

[coderfin]

Installing @storybook/global as a dev-dependency fixed the issue for me.

[pascalduez]

The only thing that seems to work for me is pinning the addons I use to the 7.5.x range.
I use Yarn here.

"resolutions": {
  "@storybook/addon-actions": "7.5.3",
  "@storybook/addon-links": "7.5.3"
},

export default {
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@etchteam/storybook-addon-status',
  ],
};

[unional]

For me it's due to addon-console:
storybookjs/storybook-addon-console#80

[ndelangen]

@shilman I did some investigations, and it seems the webpack externals field might not work for CommonJS: https://webpack.js.org/configuration/externals/#externals

This is a problem.

But it's very confusing.

Here's what I've been able to gather:

• addon-console is CJS only, it does not have any ESM
• addon-console require()s @storybook/global. (it does not depend on it in any way at all ⛳ )
• addon-console require()s addon-actions (it has a peerDependency on it)
• the repro does not have a dependency on addon-actions, but this is saved by npm installing it, and addon-essentials providing it.
• @storybook/global IS in node_modules, tons of other stuff depends on it.

De-noising the error:

Error: Cannot find module '@storybook/global'
    at webpackEmptyContext
    at ../../lib/channels/dist/index.js
    at ./node_modules/@storybook/addon-actions/dist/index.js
    at ./node_modules/@storybook/addon-console/dist/index.js
    at ./.storybook/preview.ts

Now note this:

That's where the error comes from (note also that webpack does not error in the terminal, but only in the browser)
See how there's a bunch of webpackEmptyContext one of them is @storybook/addon-actions/dist, webpack thinks this is empty!?

I'm tracing the breakage futher and I see webpack has outputted this code:

var global$1 = __webpack_require__(/*! @storybook/global */ "@storybook/global");
__webpack_require__(/*! @storybook/core-events */ "@storybook/core-events");
var previewErrors = __webpack_require__(/*! @storybook/core-events/preview-errors */ "./node_modules/@storybook/core-events/dist/errors/preview-errors.js");
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf,
  __hasOwnProp = Object.prototype.hasOwnProperty;
var __require = (x =>  true ? __webpack_require__("./node_modules/@storybook/addon-actions/dist sync recursive") : 0)(function (x) {
  if (true) return __webpack_require__("./node_modules/@storybook/addon-actions/dist sync recursive").apply(this, arguments);
  throw Error('Dynamic require of "' + x + '" is not supported');
});

It's this: "./node_modules/@storybook/addon-actions/dist sync recursive", that seems to very off. It will yield an webpackEmptyContext.

That context is later used in addon-console > addon-actions' bundled code, and it's not able find it, because ...well... its an emptyContext!

The strangest thing is, that there's even both an externalization for @storybook/global AND an webpack alias for it:

If we can figure out how and why this "./node_modules/@storybook/addon-actions/dist sync recursive" context is created/is empty we might get closer to a solution.

---

Out of desperation, I tried a thing:
I converted addon-console to ESM
... and that made it work.

So that's 1 path forwards, I guess?

Why that makes it work, I haven't figured out really.

[ndelangen]

To follow up, I tried bringing addon-console up to date with modern tooling, and it's do-able, but looking at the addon, a lot of it doesn't quite make sense.

• it should have react as a peerDep, but it doesn't
• it was using tsc, but didn't have a dependency on typescript, and also didn't have a tsconfig.json
• it uses global.STORYBOOK_ENV, which should exist, but it's undefined at runtime
• it has a lot of options that confuse me.

I opened a PR adding ESM, and compiling with tsup

[drygiel]

Any updates on this? We are unable to update storybook to 7.6.* in the company... We use nx monorepo but even if I manually paste global into nodes_module/@storybook/global it cant find it ;/

[raymondluong]

Heads up for anyone also using Chromatic, pinning @storybook/addon-actions to 7.5.x while every other Storybook page was on 7.6 was causing our Chromatic deploys to time out, so we had to downgrade everything back down to 7.5.

[ndelangen]

I have an update:

There's a canary version available.
3.0.0--canary.84.e8a1f80.0

Could someone try upgrading this it, to see if it fixes the problem for them? 🙏

[Lighttree]

@ndelangen Tested on SB7.6, works for me!

[soren121]

@storybook/addon-console is not a dependency in my project, so there is nothing to upgrade for me. (Not even a transitive dependency, it doesn't exist in my package-lock.json.)

My issue is with stories that use @storybook/addon-actions. Should I file a new issue?

[stevoland]

Hi @soren121, I had the same issue: Cannot find module '@storybook/global' when importing @storybook/addon-actions directly from app code. My circs are pretty niche (web build of react-native app) but I fixed it by aliasing to the ESM build (my resolve.mainFields are ['browser', 'main', 'module'], defaulting to react-native is the correct fix for me but causes other issues)

import { resolve } from 'path'

config.resolve.alias = {
  '@storybook/addon-actions$': resolve(
    __dirname,
    '../../node_modules/@storybook/addon-actions/dist/index.mjs',
  )
}

[adamdiestelkamp]

Just tried upgrading today from 7.5.3 to 7.6.10 and still seeing this issue.

Also using Chromatic 10.6.0

[DeepRed]

Let me chime in and say that I dont use @storybook/addon-console but that I am getting the same issue. I am using @storybook/addon-actions": "^7.6.12
Removing the import of addon-actions from an individual story will allow storybook to render correctly.
Downgrading to @storybook/addon-actions": "^7.5.3 mitigate the issue and the story renders correctly in storybook. Will go with this for now and watch future releases.

[soren121]

I think I've found the issue in my own project. Those of you with the @storybook/addon-actions bug: do you have a Babel config in which @babel/preset-env has the modules option set to something other than auto?

I had modules: 'commonjs' set, which seems to break Storybook >=7.6. Changing it to modules: 'auto' fixes the build.

[vanessayuenn]

We created another fix for this issue (#26145) and released a canary containing it which can be tested by running:

npx storybook@0.0.0-pr-26145-sha-32b8346f upgrade

The canary is based on Storybook 8, but once the fix is confirmed and merged, we will patch it to Storybook 7.6 as well.

@stevoland @adamdiestelkamp @DeepRed @soren121 Would you mind testing it out and letting us know? 🙏

[morewings]

For lazy dudes like me coming from Google 7.4.6 works well.