fix(storybook): Apply workaround in #12003 also for Webpack Storybook

Author: Tobbe

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

@@ -25,7 +25,7 @@
     "@redwoodjs/telemetry": "7.7.4",
     "chalk": "4.1.2",
     "execa": "5.1.1",
-    "semver": "7.6.3",
+    "semver": "7.6.2",
     "storybook": "7.6.17",
     "storybook-framework-redwoodjs-vite": "7.7.4",
     "terminal-link": "2.1.1",

packages/cli-packages/storybook/package.json

@@ -29,12 +29,14 @@
     "@storybook/react-webpack5": "7.6.17",
     "chalk": "4.1.2",
     "execa": "5.1.1",
+    "semver": "7.6.2",
     "storybook": "7.6.17",
     "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/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 { BundlerEnum, getConfig, getPaths } from '@redwoodjs/project-config'
 // Allow import of untyped package
@@ -26,8 +28,8 @@ export async function handler({
   if (getConfig().web.bundler === BundlerEnum.VITE) {
     console.log(
       c.bold(
-        `\nIt looks like you're using vite, please try:\n\n  yarn rw storybook-vite\n\nThis will run storybook using vite which should be a much nicer experience for you.\nYou can find out more at: https://community.redwoodjs.com/t/7212\n\n`,
-      ),
+        `\nIt looks like you're using vite, please try:\n\n  yarn rw storybook-vite\n\nThis will run storybook using vite which should be a much nicer experience for you.\nYou can find out more at: https://community.redwoodjs.com/t/7212\n\n`
+      )
     )
   }
 
@@ -105,8 +107,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

@@ -8046,7 +8046,7 @@ __metadata:
     "@types/yargs": "npm:17.0.32"
     chalk: "npm:4.1.2"
     execa: "npm:5.1.1"
-    semver: "npm:7.6.3"
+    semver: "npm:7.6.2"
     storybook: "npm:7.6.17"
     storybook-framework-redwoodjs-vite: "npm:7.7.4"
     terminal-link: "npm:2.1.1"
@@ -8068,9 +8068,11 @@ __metadata:
     "@storybook/addon-docs": "npm:7.6.17"
     "@storybook/addon-essentials": "npm:7.6.17"
     "@storybook/react-webpack5": "npm:7.6.17"
+    "@types/semver": "npm:^7"
     "@types/yargs": "npm:17.0.32"
     chalk: "npm:4.1.2"
     execa: "npm:5.1.1"
+    semver: "npm:7.6.2"
     storybook: "npm:7.6.17"
     terminal-link: "npm:2.1.1"
     tsx: "npm:4.15.2"
@@ -11428,20 +11430,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/semver@npm:^7":
+"@types/semver@npm:^7, @types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4":
   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"
-  checksum: 10c0/8663ff927234d1c5fcc04b33062cb2b9fcfbe0f5f351ed26c4d1e1581657deebd506b41ff7fdf89e787e3d33ce05854bc01686379b89e9c49b564c4cfa988efa
-  languageName: node
-  linkType: hard
-
 "@types/send@npm:*":
   version: 0.17.1
   resolution: "@types/send@npm:0.17.1"
@@ -30076,15 +30071,6 @@ __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"