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)