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 already set for compatibility with React 19

contributors.yml

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

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

@@ -8,7 +8,7 @@ import type { ViteDevOptions } from "../vite/dev";
 import type { ViteBuildOptions } from "../vite/build";
 import { formatRoutes } from "../config/format";
 import type { RoutesFormat } from "../config/format";
-import { loadPluginContext } from "../vite/plugin";
+import { loadPluginContext } from "../vite/plugin-context";
 import { transpile as convertFileToJS } from "./useJavascript";
 import * as profiler from "../vite/profiler";
 import * as Typegen from "../typegen";

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

@@ -1,7 +1,19 @@
 #!/usr/bin/env node
 import { run } from "./run";
+import { parseArgs } from "./parse";
 
-run().then(
+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";
+}
+
+run(input, flags, command).then(
   () => {
     process.exit(0);
   },

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/vite/build.ts

@@ -8,8 +8,8 @@ import {
   type ServerBundleBuildConfig,
   resolveViteConfig,
   extractPluginContext,
-  getServerBuildDirectory,
-} from "./plugin";
+} from "./plugin-context";
+import { getServerBuildDirectory } from "./plugin";
 import {
   type BuildManifest,
   type ServerBundlesBuildManifest,

packages/react-router-dev/vite/plugin-context.ts

@@ -0,0 +1,120 @@
+// We can only import types from Vite at the top level since we're in a CJS
+// context but want to use Vite's ESM build to avoid deprecation warnings
+import * as fse from "fs-extra";
+import * as path from "node:path";
+import colors from "picocolors";
+import type * as Vite from "vite";
+import type { ResolvedReactRouterConfig } from "../config/config";
+import type { RouteManifest } from "../config/routes";
+import type { Manifest as ReactRouterManifest } from "../manifest";
+
+export type ServerBundleBuildConfig = {
+  routes: RouteManifest;
+  serverBundleId: string;
+};
+
+export type ReactRouterPluginSsrBuildContext =
+  | {
+      isSsrBuild: false;
+      getReactRouterServerManifest?: never;
+      serverBundleBuildConfig?: never;
+    }
+  | {
+      isSsrBuild: true;
+      getReactRouterServerManifest: () => Promise<ReactRouterManifest>;
+      serverBundleBuildConfig: ServerBundleBuildConfig | null;
+    };
+
+export type ReactRouterPluginContext = ReactRouterPluginSsrBuildContext & {
+  rootDirectory: string;
+  entryClientFilePath: string;
+  entryServerFilePath: string;
+  publicPath: string;
+  reactRouterConfig: ResolvedReactRouterConfig;
+  viteManifestEnabled: boolean;
+};
+
+export function findConfig(
+  dir: string,
+  basename: string,
+  extensions: string[]
+): string | undefined {
+  for (let ext of extensions) {
+    let name = basename + ext;
+    let file = path.join(dir, name);
+    if (fse.existsSync(file)) return file;
+  }
+
+  return undefined;
+}
+
+export async function resolveViteConfig({
+  configFile,
+  mode,
+  root,
+}: {
+  configFile?: string;
+  mode?: string;
+  root: string;
+}) {
+  let vite = await import("vite");
+
+  let viteConfig = await vite.resolveConfig(
+    { mode, configFile, root },
+    "build", // command
+    "production", // default mode
+    "production" // default NODE_ENV
+  );
+
+  if (typeof viteConfig.build.manifest === "string") {
+    throw new Error("Custom Vite manifest paths are not supported");
+  }
+
+  return viteConfig;
+}
+
+export async function extractPluginContext(viteConfig: Vite.ResolvedConfig) {
+  return viteConfig["__reactRouterPluginContext" as keyof typeof viteConfig] as
+    | ReactRouterPluginContext
+    | undefined;
+}
+
+export async function loadPluginContext({
+  configFile,
+  root,
+}: {
+  configFile?: string;
+  root?: string;
+}) {
+  if (!root) {
+    root = process.env.REACT_ROUTER_ROOT || process.cwd();
+  }
+
+  configFile =
+    configFile ??
+    findConfig(root, "vite.config", [
+      ".ts",
+      ".cts",
+      ".mts",
+      ".js",
+      ".cjs",
+      ".mjs",
+    ]);
+
+  if (!configFile) {
+    console.error(colors.red("Vite config file not found"));
+    process.exit(1);
+  }
+
+  let viteConfig = await resolveViteConfig({ configFile, root });
+  let ctx = await extractPluginContext(viteConfig);
+
+  if (!ctx) {
+    console.error(
+      colors.red("React Router Vite plugin not found in Vite config")
+    );
+    process.exit(1);
+  }
+
+  return ctx;
+}