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

@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.

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

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

@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?

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

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

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

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

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',
  )
}

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.

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? 🙏

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.

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

Also using Chromatic 10.6.0

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

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',
  ],
};