Merge branch 'dev' into markdalgleish/vite-env-build-assets-dir

Author: markdalgleish

.changeset/dirty-balloons-stare.md

@@ -0,0 +1,7 @@
+---
+"@react-router/dev": patch
+---
+
+In a `routes.ts` context, ensure the `--mode` flag is respected for `import.meta.env.MODE`
+
+Previously, `import.meta.env.MODE` within a `routes.ts` context was always `"development"` for the `dev` and `typegen --watch` commands, but otherwise resolved to `"production"`. These defaults are still in place, but if a `--mode` flag is provided, this will now take precedence.

.changeset/little-cups-deliver.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+When executing `react-router.config.ts` and `routes.ts` with `vite-node`, ensure that PostCSS config files are ignored

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

@@ -21,10 +21,14 @@ export async function routes(
   flags: {
     config?: string;
     json?: boolean;
+    mode?: string;
   } = {}
 ): Promise<void> {
   rootDirectory = resolveRootDirectory(rootDirectory, flags);
-  let configResult = await loadConfig({ rootDirectory });
+  let configResult = await loadConfig({
+    rootDirectory,
+    mode: flags.mode ?? "production",
+  });
 
   if (!configResult.ok) {
     console.error(colors.red(configResult.error));
@@ -81,6 +85,7 @@ export async function generateEntry(
   flags: {
     typescript?: boolean;
     config?: string;
+    mode?: string;
   } = {}
 ) {
   // if no entry passed, attempt to create both
@@ -91,7 +96,10 @@ export async function generateEntry(
   }
 
   rootDirectory = resolveRootDirectory(rootDirectory, flags);
-  let configResult = await loadConfig({ rootDirectory });
+  let configResult = await loadConfig({
+    rootDirectory,
+    mode: flags.mode ?? "production",
+  });
 
   if (!configResult.ok) {
     console.error(colors.red(configResult.error));
@@ -212,7 +220,8 @@ async function createClientEntry(
 export async function typegen(
   root: string,
   flags: {
-    watch?: boolean;
+    watch: boolean;
+    mode?: string;
     config?: string;
   }
 ) {
@@ -223,9 +232,15 @@ export async function typegen(
     const vite = getVite();
     const logger = vite.createLogger("info", { prefix: "[react-router]" });
 
-    await Typegen.watch(root, { logger });
+    await Typegen.watch(root, {
+      mode: flags.mode ?? "development",
+      logger,
+    });
     await new Promise(() => {}); // keep alive
     return;
   }
-  await Typegen.run(root);
+
+  await Typegen.run(root, {
+    mode: flags.mode ?? "production",
+  });
 }

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

@@ -611,15 +611,17 @@ export type ConfigLoader = {
 export async function createConfigLoader({
   rootDirectory: root,
   watch,
+  mode,
 }: {
   watch: boolean;
   rootDirectory?: string;
+  mode: string;
 }): Promise<ConfigLoader> {
   root = root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
 
   let viteNodeContext = await ViteNode.createContext({
     root,
-    mode: watch ? "development" : "production",
+    mode,
   });
 
   let reactRouterConfigFile = findEntry(root, "react-router.config", {
@@ -722,9 +724,16 @@ export async function createConfigLoader({
   };
 }
 
-export async function loadConfig({ rootDirectory }: { rootDirectory: string }) {
+export async function loadConfig({
+  rootDirectory,
+  mode,
+}: {
+  rootDirectory: string;
+  mode: string;
+}) {
   let configLoader = await createConfigLoader({
     rootDirectory,
+    mode,
     watch: false,
   });
   let config = await configLoader.getConfig();

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

@@ -14,8 +14,8 @@ import { getTypesDir, getTypesPath } from "./paths";
 import * as Params from "./params";
 import * as Route from "./route";
 
-export async function run(rootDirectory: string) {
-  const ctx = await createContext({ rootDirectory, watch: false });
+export async function run(rootDirectory: string, { mode }: { mode: string }) {
+  const ctx = await createContext({ rootDirectory, mode, watch: false });
   await writeAll(ctx);
 }
 
@@ -25,9 +25,9 @@ export type Watcher = {
 
 export async function watch(
   rootDirectory: string,
-  { logger }: { logger?: vite.Logger } = {}
+  { mode, logger }: { mode: string; logger?: vite.Logger }
 ): Promise<Watcher> {
-  const ctx = await createContext({ rootDirectory, watch: true });
+  const ctx = await createContext({ rootDirectory, mode, watch: true });
   await writeAll(ctx);
   logger?.info(pc.green("generated types"), { timestamp: true, clear: true });
 
@@ -55,11 +55,13 @@ export async function watch(
 async function createContext({
   rootDirectory,
   watch,
+  mode,
 }: {
   rootDirectory: string;
   watch: boolean;
+  mode: string;
 }): Promise<Context> {
-  const configLoader = await createConfigLoader({ rootDirectory, watch });
+  const configLoader = await createConfigLoader({ rootDirectory, mode, watch });
   const configResult = await configLoader.getConfig();
 
   if (!configResult.ok) {

packages/react-router-dev/vite/build.ts

@@ -35,7 +35,10 @@ export async function build(root: string, viteBuildOptions: ViteBuildOptions) {
   await preloadVite();
   let vite = getVite();
 
-  let configResult = await loadConfig({ rootDirectory: root });
+  let configResult = await loadConfig({
+    rootDirectory: root,
+    mode: viteBuildOptions.mode ?? "production",
+  });
 
   if (!configResult.ok) {
     throw new Error(configResult.error);

packages/react-router-dev/vite/cloudflare-dev-proxy.ts

@@ -57,7 +57,7 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>(
 
   return {
     name: PLUGIN_NAME,
-    config: async (config) => {
+    config: async (config, configEnv) => {
       await preloadVite();
       const vite = getVite();
       // This is a compatibility layer for Vite 5. Default conditions were
@@ -74,6 +74,7 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>(
 
       let configResult = await loadConfig({
         rootDirectory: config.root ?? process.cwd(),
+        mode: configEnv.mode,
       });
 
       if (!configResult.ok) {

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

@@ -1190,15 +1190,19 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         rootDirectory =
           viteUserConfig.root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
 
+        let mode = viteConfigEnv.mode;
+
         if (viteCommand === "serve") {
           typegenWatcherPromise = Typegen.watch(rootDirectory, {
+            mode,
             // ignore `info` logs from typegen since they are redundant when Vite plugin logs are active
             logger: vite.createLogger("warn", { prefix: "[react-router]" }),
           });
         }
 
         reactRouterConfigLoader = await createConfigLoader({
           rootDirectory,
+          mode,
           watch: viteCommand === "serve",
         });
 

packages/react-router-dev/vite/vite-node.ts

@@ -36,6 +36,15 @@ export async function createContext({
     optimizeDeps: {
       noDiscovery: true,
     },
+    css: {
+      // This empty PostCSS config object prevents the PostCSS config file from
+      // being loaded. We don't need it in a React Router config context, and
+      // there's also an issue in Vite 5 when using a .ts PostCSS config file in
+      // an ESM project: https://github.com/vitejs/vite/issues/15869. Consumers
+      // can work around this in their own Vite config file, but they can't
+      // configure this internal usage of vite-node.
+      postcss: {},
+    },
     configFile: false,
     envFile: false,
     plugins: [],