[Bug]: Error [ERR_REQUIRE_ESM]: require() of ES Module at @storybook/addon-docs

mistic commented 4 weeks ago

Describe the bug

We are trying to upgrade the internal usage of storybooks from v6 into v8 and we are now facing an issue that was introduced by https://github.com/storybookjs/storybook/pull/25615.

We launch the storybook builds through a Node.js script that uses the buildStandalone function from @storybook/react/standalone. During the node resolution phase we got the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/rehype-external-links/index.js from /node_modules/@storybook/addon-docs/dist/preset.js not supported.
      Instead change the require of index.js in /node_modules/@storybook/addon-docs/dist/preset.js to a dynamic import() which is available in all CommonJS modules.
          at Object.newLoader [as .js]

The cause seems to be related with the fact that the cjs build of @storybook/addon-docs is requiring an ESM module. It feels to me this PR should be reverted until a better alternative to replace those packages is found or the interop for esm and require is better supported on node (initial interop was released on node v22 but has limitations and it is still experimental).

\cc @JReinhold

Reproduction link

https://github.com/elastic/kibana/pull/195148

Reproduction steps

Checkout the PR
yarn kbn bootstrap && yarn storybook esql_editor

System

Storybook v8

Additional context

No response

valentinpalkovic commented 3 weeks ago

Hi @mistic

This PR might fix your issue: https://github.com/storybookjs/storybook/pull/29544 Do you mind trying it out with the following canary release? npx storybook@0.0.0-pr-29544-sha-fd7f82f1 upgrade

Ikuni17 commented 3 weeks ago

Hi @valentinpalkovic, I'm on the same team as @mistic.

Thanks for the PR, the canary release is working for rehype packages now. We're seeing a similar error for react-docgen while using addon-docs:

Module build failed: Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/react-docgen/dist/main.js from /node_modules/@storybook/preset-react-webpack/dist/loaders/react-docgen-loader.js not supported.
Instead change the require of main.js in /node_modules/@storybook/preset-react-webpack/dist/loaders/react-docgen-loader.js to a dynamic import() which is available in all CommonJS modules.

JReinhold commented 2 weeks ago

I believe this is happening because you're not using the Storybook CLI to build your Storybook, but instead build from @storybook/core-server directly. Therefore some module resolutions and loaders aren't set up properly.

That is not a public API and we don't support that pattern in any way.

I'm fine with trying to fix react-docgen here too, but I can't promise we won't "regress" on this in the future, because this type of usage is definitely not something we test for.

storybookjs / storybook