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

[mistic]

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 #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

elastic/kibana#195148

Reproduction steps

1. Checkout the PR
2. yarn kbn bootstrap && yarn storybook esql_editor

System

Storybook v8

Additional context

No response

[valentinpalkovic]

Hi @mistic

This PR might fix your issue: #29544
Do you mind trying it out with the following canary release?
npx [email protected] upgrade

[Ikuni17]

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]

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.

[tobiasdiez]

@JReinhold would it be possible to make this API official and public, and add tests for it as well? The Nuxt module also relies on it, and we experience similar issues: nuxt-modules/storybook#825