Node 20.19.0 broke our Storybook setup

[Tobbe]

Version

v20.19.0

Platform

Darwin Tobbes-MacBook-Pro14.local 24.2.0 Darwin Kernel Version 24.2.0: Fri Dec  6 19:02:41 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6030 arm64

Subsystem

No response

What steps will reproduce the bug?

yarn create redwood-app --yes rw-node-sb
cd rw-node-sb
yarn rw sb

How often does it reproduce? Is there a required condition?

It reproduces 100% of the time as long as you're using Node 20.19.0. 0% of the times if you're using 20.18.3

What is the expected behavior? Why is that the expected behavior?

I expect Storybook to successfully run

What do you see instead?

@storybook/cli v7.6.20

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: storybook-framework-redwoodjs-vite/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Cannot find module '/Users/tobbe/tmp/rw-test-project-sb-vite-7620/node_modules/storybook-framework-redwoodjs-vite/dist/plugins/auto-imports' imported from /Users/tobbe/tmp/rw-test-project-sb-vite-7620/node_modules/storybook-framework-redwoodjs-vite/dist/preset.js
    at finalizeResolution (node:internal/modules/esm/resolve:283:11)
    at moduleResolve (node:internal/modules/esm/resolve:952:10)
    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:347:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:333:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:320:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1371:24)
    at Module._compile (node:internal/modules/cjs/loader:1511:5)
    at loadPreset (/Users/tobbe/tmp/rw-test-project-sb-vite-7620/node_modules/@storybook/core-common/dist/index.js:15:82)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Command failed with exit code 1: yarn storybook dev --config-dir "/Users/tobbe/tmp/rw-test-project-sb-vite-7620/web/.storybook" --port 7910 --no-version-updates

Additional information

If I go to node_modules/storybook-framework-redwoodjs-vite/dist/preset.js and do this

- import { autoImports } from "./plugins/auto-imports";
+ import { autoImports } from "./plugins/auto-imports.js";

If I do that the import is successful. But it'll break on the line right after. If I update all imports in the file to specify .js that file passes, but it'll break in another storybook plugin file that I don't have control over, so at this point I stopped trying to fix it like that.

export NODE_OPTIONS=--no-experimental-require-module && yarn rw sb

Running node with that option makes it work without any edits to node_modules

[joyeecheung]

import { autoImports } from "./plugins/auto-imports";

This is not valid ESM in Node.js (the one with .js is), but is valid faux-ESM supported by certain trainspilers.

It sounds like storybook may have been relying on require(esm) to throw to detect ESM in a module and then doing transpilation on it. A real fix might need to happen in storybook - or in this case, esbuild-register - to detect ESM on its own instead of counting on require(esm) to throw, or at least it needs to detect faux-ESM errors and retry. https://github.com/egoist/esbuild-register/blob/48c7cfbd4434b0b431bb78d91796c319200d8002/src/node.ts#L59 (it's patching/using the Node.js internals here, so some breakages in different Node.js versions should be expected)

[Aghassi]

This also goes for Jest and Webpack on ourside. This feels like a change that should be in a major not in a minor version. I was surprised to see this enabled in this blog release https://nodejs.org/en/blog/release/v20.19.0#requireesm-is-now-enabled-by-default. Even if the imports are not valid ESM, the NPM ecosystem is not fully migrated to the new style syntax. This flag should not be enabled by default until Node 21 + 22 IMHO, therefore it's part of major upgrade, not a minor.