fix(storybook): Make Storybook run also on Node v20.19.0 (#12003)

Adds the `--no-experimental-require-module` Node option when running
Storybook to fix a regression introduced with Node 20.19.0

See nodejs/node#57555 and
storybookjs/storybook#30867 for more context

Author: Tobbe

packages/cli-packages/storybook-vite/package.json

@@ -25,13 +25,15 @@
     "@redwoodjs/telemetry": "7.7.4",
     "chalk": "4.1.2",
     "execa": "5.1.1",
+    "semver": "7.6.3",
     "storybook": "7.6.17",
     "storybook-framework-redwoodjs-vite": "7.7.4",
     "terminal-link": "2.1.1",
     "yargs": "17.7.2"
   },
   "devDependencies": {
     "@redwoodjs/framework-tools": "7.7.4",
+    "@types/semver": "^7",
     "@types/yargs": "17.0.32",
     "tsx": "4.15.2",
     "typescript": "5.4.5"

packages/cli-packages/storybook-vite/src/commands/storybookHandler.ts

@@ -1,8 +1,10 @@
 import fs from 'node:fs'
 import path from 'node:path'
+import process from 'node:process'
 
 import type { ExecaError } from 'execa'
 import execa from 'execa'
+import semver from 'semver'
 
 import { getPaths } from '@redwoodjs/project-config'
 import { errorTelemetry } from '@redwoodjs/telemetry'
@@ -141,8 +143,18 @@ export async function handler({
       .join(' ')}`
   }
 
+  const env: Record<string, string> = {}
+
+  if (
+    semver.parse(process.version) !== null &&
+    semver.lt(process.version, '22.0.0') &&
+    semver.gte(process.version, '20.19.0')
+  ) {
+    env.NODE_OPTIONS = '--no-experimental-require-module'
+  }
+
   try {
-    await execa.command(command, execaOptions)
+    await execa.command(command, { ...execaOptions, env })
   } catch (e) {
     if ((e as ExecaError).signal !== 'SIGINT') {
       console.log(c.error((e as Error).message))

yarn.lock

@@ -8042,9 +8042,11 @@ __metadata:
     "@redwoodjs/framework-tools": "npm:7.7.4"
     "@redwoodjs/project-config": "npm:7.7.4"
     "@redwoodjs/telemetry": "npm:7.7.4"
+    "@types/semver": "npm:^7"
     "@types/yargs": "npm:17.0.32"
     chalk: "npm:4.1.2"
     execa: "npm:5.1.1"
+    semver: "npm:7.6.3"
     storybook: "npm:7.6.17"
     storybook-framework-redwoodjs-vite: "npm:7.7.4"
     terminal-link: "npm:2.1.1"
@@ -11426,6 +11428,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/semver@npm:^7":
+  version: 7.7.0
+  resolution: "@types/semver@npm:7.7.0"
+  checksum: 10c0/6b5f65f647474338abbd6ee91a6bbab434662ddb8fe39464edcbcfc96484d388baad9eb506dff217b6fc1727a88894930eb1f308617161ac0f376fe06be4e1ee
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4":
   version: 7.5.8
   resolution: "@types/semver@npm:7.5.8"
@@ -30067,6 +30076,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:7.6.3":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+  languageName: node
+  linkType: hard
+
 "semver@npm:^6.0.0, semver@npm:^6.2.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"