Warn on client source maps in RSC Framework Mode (#14307)

Author: markdalgleish

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

@@ -31,7 +31,6 @@ import {
   init as initEsModuleLexer,
   parse as esModuleLexer,
 } from "es-module-lexer";
-import { escapePath as escapePathAsGlob } from "tinyglobby";
 import pick from "lodash/pick";
 import jsesc from "jsesc";
 import colors from "picocolors";
@@ -82,7 +81,8 @@ import {
 } from "../config/config";
 import { getOptimizeDepsEntries } from "./optimize-deps-entries";
 import { decorateComponentExportsWithProps } from "./with-props";
-import validatePluginOrder from "./plugins/validate-plugin-order";
+import { validatePluginOrder } from "./plugins/validate-plugin-order";
+import { warnOnClientSourceMaps } from "./plugins/warn-on-client-source-maps";
 
 export type LoadCssContents = (
   viteDevServer: Vite.ViteDevServer,
@@ -1488,34 +1488,6 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
           cssModulesManifest[id] = code;
         }
       },
-      buildStart() {
-        invariant(viteConfig);
-
-        if (
-          viteCommand === "build" &&
-          viteConfig.mode === "production" &&
-          !viteConfig.build.ssr &&
-          viteConfig.build.sourcemap
-        ) {
-          viteConfig.logger.warn(
-            colors.yellow(
-              "\n" +
-                colors.bold("  ⚠️  Source maps are enabled in production\n") +
-                [
-                  "This makes your server code publicly",
-                  "visible in the browser. This is highly",
-                  "discouraged! If you insist, ensure that",
-                  "you are using environment variables for",
-                  "secrets and not hard-coding them in",
-                  "your source code.",
-                ]
-                  .map((line) => "     " + line)
-                  .join("\n") +
-                "\n",
-            ),
-          );
-        }
-      },
       async configureServer(viteDevServer) {
         setDevServerHooks({
           // Give the request handler access to the critical CSS in dev to avoid a
@@ -2377,6 +2349,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
       },
     },
     validatePluginOrder(),
+    warnOnClientSourceMaps(),
   ];
 };
 

packages/react-router-dev/vite/plugins/validate-plugin-order.ts

@@ -1,6 +1,6 @@
 import type * as Vite from "vite";
 
-export default function validatePluginOrder(): Vite.Plugin {
+export function validatePluginOrder(): Vite.Plugin {
   return {
     name: "react-router:validate-plugin-order",
     configResolved(viteConfig) {

packages/react-router-dev/vite/plugins/warn-on-client-source-maps.ts

@@ -0,0 +1,50 @@
+import type * as Vite from "vite";
+import colors from "picocolors";
+import invariant from "../../invariant";
+
+export function warnOnClientSourceMaps(): Vite.Plugin {
+  let viteConfig: Vite.ResolvedConfig;
+  let viteCommand: Vite.ConfigEnv["command"];
+  let logged = false;
+
+  return {
+    name: "react-router:warn-on-client-source-maps",
+    config(_, configEnv) {
+      viteCommand = configEnv.command;
+    },
+    configResolved(config) {
+      viteConfig = config;
+    },
+    buildStart() {
+      invariant(viteConfig);
+
+      if (
+        !logged &&
+        viteCommand === "build" &&
+        viteConfig.mode === "production" &&
+        !viteConfig.build.ssr &&
+        (viteConfig.build.sourcemap ||
+          viteConfig.environments?.client?.build.sourcemap)
+      ) {
+        viteConfig.logger.warn(
+          colors.yellow(
+            "\n" +
+              colors.bold("  ⚠️  Source maps are enabled in production\n") +
+              [
+                "This makes your server code publicly",
+                "visible in the browser. This is highly",
+                "discouraged! If you insist, ensure that",
+                "you are using environment variables for",
+                "secrets and not hard-coding them in",
+                "your source code.",
+              ]
+                .map((line) => "     " + line)
+                .join("\n") +
+              "\n",
+          ),
+        );
+        logged = true;
+      }
+    },
+  };
+}

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

@@ -23,7 +23,8 @@ import {
   isVirtualClientRouteModuleId,
   CLIENT_NON_COMPONENT_EXPORTS,
 } from "./virtual-route-modules";
-import validatePluginOrder from "../plugins/validate-plugin-order";
+import { validatePluginOrder } from "../plugins/validate-plugin-order";
+import { warnOnClientSourceMaps } from "../plugins/warn-on-client-source-maps";
 
 export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
   let configLoader: ConfigLoader;
@@ -480,6 +481,7 @@ export function reactRouterRSCVitePlugin(): Vite.PluginOption[] {
       },
     },
     validatePluginOrder(),
+    warnOnClientSourceMaps(),
   ];
 }