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

[shilman]

Describe the bug

After migrating, I get HMR warnings in the browser regarding

• @storybook/react
• @storybook/addon-docs

Like so:

./node_modules/@storybook/addon-docs/dist/chunk-R4NKYYJA.mjs 1:37-44Critical dependency: require function is used in a way in which dependencies cannot be statically extracted./node_modules/@storybook/addon-docs/dist/chunk-R4NKYYJA.mjs 1:166-173Critical dependency: require function is used in a way in which dependencies cannot be statically extracted./node_modules/@storybook/react/dist/chunk-R4NKYYJA.mjs 1:37-44Critical dependency: require function is used in a way in which dependencies cannot be statically extracted./node_modules/@storybook/react/dist/chunk-R4NKYYJA.mjs 1:166-173Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

To Reproduce

https://github.com/yannbf/mealdrop

System

No response

Additional context

No response

[shilman]

Possibly related to #21340 -- CJS in MJS?

[tmeasday]

Could be! Can you look inside those referenced .mjs files and see if there is a require in there?

[tmeasday]

@yannbf what's the repro here? Is it the WP version of mealdrop?

My guess is the problem comes from this file:

❯ cat addons/docs/dist/chunk-AKU6F3WT.mjs
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
  if (typeof require !== "undefined")
    return require.apply(this, arguments);
  throw new Error('Dynamic require of "' + x + '" is not supported');
});

export {
  __require
};

It looks like that __require function is simply used for various require.resolves() in the docs code base (searching for __require in the compiled source), apart from this one point:

storybook/code/addons/docs/src/preset.ts

Line 100 in 47efd80

...(csfPluginOptions ? [require('@storybook/csf-plugin').webpack(csfPluginOptions)] : []),

I changed that to an async import (is that OK @shilman?) in this PR. The chunk above is still generated, but now we only use require.resolve() in docs. This may get rid of the original warning?

[tmeasday]

Hmm, I noticed @yannbf mentioned the same problem coming from @storybook/react. In that case we are only using require.resolve() so I am guessing the PR above will not remove the warning (probably a decent idea anyway @shilman?).

@ndelangen this one might be in your court. Any idea how we can stop tsup from emitting this require() code when we just want to use require.resolve?

[ndelangen]

@tmeasday the .mjs code (meant for the browser) should never use require.resolve IMHO.
I can get into details as to what it implies and why it shouldn't happen, but I'm not sure that's what's actually going on here.

Looking at the issue/warning, it seems that the code meant for browsers created by tsup has some code in there as a fallback for when it might be ran in node.
This fallback code has a reference to the original require. I suspect the AST parsing of the builder is detecting this, and can't work out what in the world could be imported/required here, thus throws a warning.

Getting rid of that fallback code somehow seems like the right thing to do, indeed.

[tmeasday]

@ndelangen well maybe this is a tsup problem then. Take a look in the code/renderers/react/dist, and search for the chunk that defines __require. For me it's called chunk-AKU6F3WT.mjs, and looks like:

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

export {
  __require
};

The only place __require is used is in preset.mjs, which is node code.

However the chunk is imported (unused, why?) in both index.mjs and config.mks, preview side code, like so:

import {
  render,
  renderToCanvas
} from "./chunk-EWX34TBR.mjs";
import "./chunk-AKU6F3WT.mjs";

[ndelangen]

I'll investigate @tmeasday

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.62 containing PR #21402 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Reopening this as not fixed due to #21822

And note that project is using html-webpack5, not React.

[tmeasday]

I think this one may have gotten closed by accident, given I had said:

I changed that to an async import (is that OK @shilman?) in #21402. The chunk above is still generated, but now we only use require.resolve() in docs. This may get rid of the original warning?

Hmm, I noticed @yannbf mentioned the same problem coming from @storybook/react. In that case we are only using require.resolve() so I am guessing the PR above will not remove the warning (probably a decent idea anyway @shilman?).

So I think we merged the PR just for neatness, not because we thought it would fix the issue.

@ndelangen did you ever get anywhere with this one?

[ndelangen]

@tmeasday The issue arises (I think) from the fact that we mix browser & node and ESM and CJS when generating dist.

I experimented here splitting it out:
#21422

The goal was to have a list of entries for node files, and a list of browser files.

However I ran into trouble with the presets core, that tries to resolve browser files from node.
In order for that to work files need to exists for node to find.

I've been considering using enhanced-resolve and improve the core presets mechanism, but that was obviously not going to make it into 7.0 and so I stopped working on that.

This issue happens when node imports the ESM file we created with faulty tsup config.

storybook/scripts/prepare/bundle.ts

Line 86 in 88eb083

platform: platform || 'browser',

The default platform for ESM is browser, but setting the platform in the package.json will set it for all entrypoints, that's what I originally set out to fix in my PR.

[sw-tracker]

Any updates on this? We are also having this issue with version "7.0.2".

[ndelangen]

no, not yet.. I've done more experiments on my test-branch, but no resolution yet.

[tmeasday]

@ndelangen have you been able to reproduce the core issue? I think might be simpler to just make tsup break in this way (include require when it shouldn't) in a very simple scenario and figure out what triggers it, rather than trying figure it out in these complex scenarios.

[ndelangen]

@tmeasday no, I think I have a principle understanding of the problem, but not an isolated reproduction case.

I'll reach out to @yannbf considering the issue was reported on mealdrop.

[majidabbasimediaopt]

I have the same issue and using version 7.0.5

[gmonte]

same with 7.0.6

[tmeasday]

Does anyone have a simpler reproduction of this?

[paulwoodland]

We've had the same error with docs (we don't use react, we use the html framework) since upgrading to version 7, which has been 7.0.4, 7.0.5 and 7.0.6 so far. I don't know how to reproduce it simply however, as our project is quite complicated.

[tibi2303]

Same on html framework with sb 7.0.6.

[usrrname]

Yep, that's also where my investigation has taken me for html-vite and @storybook/html[-webpack5] using a main.cjs

[dohomi]

Using 7.0.7 and this is the public repo where the error happens: https://github.com/dohomi/tamagui-kitchen-sink/tree/master/apps/storybook-react

[pcambra]

Same issue, 7.0.7 and html-webpack5

[jbascue]

Same issue. SB 7.0.7 and React

[usrrname]

Also seeing it in Storybook 7.1.0-alpha.10 for web-components-webpack5

[ndelangen]

I think I found the fix @tmeasday !

[L-Triple-O]

Working through a migration from 6.4.20 to 7.07 and came to this. After implementing a workaround for #21242 I'm hitting this wall now.

[tmeasday]

@L-Triple-O -- I believe this is a warning -- is it stopping the compilation in your case?

[L-Triple-O]

@tmeasday, It's not stopping the compilation and yes they are warnings at this point, but stories are not being rendered at all.

I see ^ this in the browser console.

and I end up getting ^this when running npm run build-storybook, but it it never errors.

[tmeasday]

@L-Triple-O OK, I'd suggest the stories not rendering is a different issue because I don't think it's a symptom observed by others experiencing this warning. I don't see anything in those screenshots that would really indicate what might be causing it.

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.12 containing PR #22330 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.8 containing PR #22330 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[tuvshinbay4r]

Hi,
I am using version 7.1.1 of @storybook/nextjs and getting the error:

client.js:200

../../node_modules/.pnpm/@storybook+nextjs@7.0.27_@babel+core@7.22.9_esbuild@0.17.19_next@13.4.9_react-dom@18.2.0_reac_753yxqu3is4neia25vsnlcsdgm/node_modules/@storybook/nextjs/dist/chunk-YPQDI6HO.mjs 1:224-231Critical dependency: require function is used in a way in which dependencies cannot be statically extracted../../node_modules/.pnpm/@storybook+nextjs@7.0.27_@babel+core@7.22.9_esbuild@0.17.19_next@13.4.9_react-dom@18.2.0_reac_753yxqu3is4neia25vsnlcsdgm/node_modules/@storybook/nextjs/dist/chunk-YPQDI6HO.mjs 1:353-360Critical dependency: require function is used in a way in which dependencies cannot be statically extracted../../node_modules/.pnpm/jest-util@29.6.2/node_modules/jest-util/build/requireOrImportModule.js 44:27-44Critical dependency: the request of a dependency is an expression../../node_modules/.pnpm/jest-util@29.6.2/node_modules/jest-util/build/requireOrImportModule.js 55:37-59Critical dependency: the request of a dependency is an expression

[ndelangen]

@tuvshinbay4r Your error message clearly shows you're using @storybook+nextjs@7.0.27

[carlosrsabreu]

I'm having this warn when updating to storybook@7.5.0. Anyone else?

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

[juliocarneiroblockbr]

same here

[baileyandy]

Have you tried setting storyStoreV7: true in the config? This seemed to be the only way of getting my project working with Storybook v7 and avoiding this error.

[TheMikeyRoss]

I keep seeing this warning when running storybook for my team ui kit
https://github.com/sikka-software/hawa

it's running on storybook v7.5.3 and next v14.0.1

The warning seems to be coming from @storybook/nextjs

Adding the following in my Storybook config doesn't silence the warning

features: {
    storyStoreV7: true,
},

I created this discussion for it: #24757

[cheryl-c-tirerack]

I have cross posted. I am not sure if if this is the cause, but my hot reload is not working.
#24854 (comment)
Ive tried up and down-grading versions.
There is a reproducible repo there, but I'm told it works fine for someone else. Would love validation because it is really breaking our flow.