Decouple CLI arg parsing/execution for NODE_ENV initialization

.changeset/default-node-env.md

@@ -0,0 +1,6 @@
+---
+"@react-router/serve": patch
+"@react-router/dev": patch
+---
+
+Properly initialize NODE_ENV if not set for compatibility with React 19

contributors.yml

@@ -141,6 +141,7 @@
 - johnpangalos
 - jonkoops
 - jrakotoharisoa
+- jrestall
 - juanpprieto
 - jungwoo3490
 - kachun333

packages/react-router-dev/cli/index.ts

@@ -1,12 +1,25 @@
 #!/usr/bin/env node
-import { run } from "./run";
+import { parseArgs } from "./parse";
 
-run().then(
-  () => {
-    process.exit(0);
-  },
-  (error: unknown) => {
-    if (error) console.error(error);
-    process.exit(1);
-  }
-);
+let { input, flags, command } = parseArgs();
+
+// If not already set, default `NODE_ENV` so React loads the proper
+// version in it's CJS entry script.  We have to do this before importing `run.ts`
+// since that is what imports `react` (indirectly via `react-router`)
+if (command === "dev") {
+  process.env.NODE_ENV = process.env.NODE_ENV ?? "development";
+} else {
+  process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
+}
+
+import("./run").then(({ run }) => {
+  run(input, flags, command).then(
+    () => {
+      process.exit(0);
+    },
+    (error: unknown) => {
+      if (error) console.error(error);
+      process.exit(1);
+    }
+  );
+});

packages/react-router-dev/cli/parse.ts

@@ -0,0 +1,85 @@
+import arg from "arg";
+import semver from "semver";
+
+/**
+ * Parse command line arguments for `react-router` dev CLI
+ */
+export function parseArgs(argv: string[] = process.argv.slice(2)) {
+  // Check the node version
+  let versions = process.versions;
+  let MINIMUM_NODE_VERSION = 20;
+  if (
+    versions &&
+    versions.node &&
+    semver.major(versions.node) < MINIMUM_NODE_VERSION
+  ) {
+    console.warn(
+      `️⚠️ Oops, Node v${versions.node} detected. react-router requires ` +
+        `a Node version greater than ${MINIMUM_NODE_VERSION}.`
+    );
+  }
+
+  let isBooleanFlag = (arg: string) => {
+    let index = argv.indexOf(arg);
+    let nextArg = argv[index + 1];
+    return !nextArg || nextArg.startsWith("-");
+  };
+
+  let args = arg(
+    {
+      "--force": Boolean,
+      "--help": Boolean,
+      "-h": "--help",
+      "--json": Boolean,
+      "--token": String,
+      "--typescript": Boolean,
+      "--no-typescript": Boolean,
+      "--version": Boolean,
+      "-v": "--version",
+      "--port": Number,
+      "-p": "--port",
+      "--config": String,
+      "-c": "--config",
+      "--assetsInlineLimit": Number,
+      "--clearScreen": Boolean,
+      "--cors": Boolean,
+      "--emptyOutDir": Boolean,
+      "--host": isBooleanFlag("--host") ? Boolean : String,
+      "--logLevel": String,
+      "-l": "--logLevel",
+      "--minify": String,
+      "--mode": String,
+      "-m": "--mode",
+      "--open": isBooleanFlag("--open") ? Boolean : String,
+      "--strictPort": Boolean,
+      "--profile": Boolean,
+      "--sourcemapClient": isBooleanFlag("--sourcemapClient")
+        ? Boolean
+        : String,
+      "--sourcemapServer": isBooleanFlag("--sourcemapServer")
+        ? Boolean
+        : String,
+      "--watch": Boolean,
+    },
+    {
+      argv,
+    }
+  );
+
+  let flags: any = Object.entries(args).reduce((acc, [key, value]) => {
+    key = key.replace(/^--/, "");
+    acc[key] = value;
+    return acc;
+  }, {} as any);
+
+  flags.interactive = flags.interactive ?? require.main === module;
+  if (args["--no-typescript"]) {
+    flags.typescript = false;
+  }
+
+  return {
+    input: args._,
+    command: args._[0],
+    flags,
+  };
+}

packages/react-router-dev/cli/run.ts

@@ -1,5 +1,3 @@
-import arg from "arg";
-import semver from "semver";
 import colors from "picocolors";
 
 import * as commands from "./commands";
@@ -81,76 +79,7 @@ ${colors.blueBright("react-router")}
  * Programmatic interface for running the react-router CLI with the given command line
  * arguments.
  */
-export async function run(argv: string[] = process.argv.slice(2)) {
-  // Check the node version
-  let versions = process.versions;
-  let MINIMUM_NODE_VERSION = 20;
-  if (
-    versions &&
-    versions.node &&
-    semver.major(versions.node) < MINIMUM_NODE_VERSION
-  ) {
-    console.warn(
-      `️⚠️ Oops, Node v${versions.node} detected. react-router requires ` +
-        `a Node version greater than ${MINIMUM_NODE_VERSION}.`
-    );
-  }
-
-  let isBooleanFlag = (arg: string) => {
-    let index = argv.indexOf(arg);
-    let nextArg = argv[index + 1];
-    return !nextArg || nextArg.startsWith("-");
-  };
-
-  let args = arg(
-    {
-      "--force": Boolean,
-      "--help": Boolean,
-      "-h": "--help",
-      "--json": Boolean,
-      "--token": String,
-      "--typescript": Boolean,
-      "--no-typescript": Boolean,
-      "--version": Boolean,
-      "-v": "--version",
-      "--port": Number,
-      "-p": "--port",
-      "--config": String,
-      "-c": "--config",
-      "--assetsInlineLimit": Number,
-      "--clearScreen": Boolean,
-      "--cors": Boolean,
-      "--emptyOutDir": Boolean,
-      "--host": isBooleanFlag("--host") ? Boolean : String,
-      "--logLevel": String,
-      "-l": "--logLevel",
-      "--minify": String,
-      "--mode": String,
-      "-m": "--mode",
-      "--open": isBooleanFlag("--open") ? Boolean : String,
-      "--strictPort": Boolean,
-      "--profile": Boolean,
-      "--sourcemapClient": isBooleanFlag("--sourcemapClient")
-        ? Boolean
-        : String,
-      "--sourcemapServer": isBooleanFlag("--sourcemapServer")
-        ? Boolean
-        : String,
-      "--watch": Boolean,
-    },
-    {
-      argv,
-    }
-  );
-
-  let input = args._;
-
-  let flags: any = Object.entries(args).reduce((acc, [key, value]) => {
-    key = key.replace(/^--/, "");
-    acc[key] = value;
-    return acc;
-  }, {} as any);
-
+export async function run(input: string[], flags: any, command: string) {
   if (flags.help) {
     console.log(helpText);
     return;
@@ -161,13 +90,6 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     return;
   }
 
-  flags.interactive = flags.interactive ?? require.main === module;
-  if (args["--no-typescript"]) {
-    flags.typescript = false;
-  }
-
-  let command = input[0];
-
   // Note: Keep each case in this switch statement small.
   switch (command) {
     case "routes":

packages/react-router-dev/tsup.config.ts

@@ -9,6 +9,7 @@ import pkg from "./package.json";
 
 const entry = [
   "cli/index.ts",
+  "cli/run.ts",
   "config.ts",
   "routes.ts",
   "vite.ts",

packages/react-router-serve/bin.js

@@ -1,2 +1,7 @@
 #!/usr/bin/env node
+
+// If not already set, default `NODE_ENV=production` so React loads the proper
+// version in it's CJS entry script
+process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
+
 require("./dist/cli");