feat(react-router): only render dev warnings in dev

.changeset/thirty-bugs-jump.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Only render dev warnings in DEV mode

contributors.yml

@@ -331,6 +331,7 @@
 - thethmuu
 - thisiskartik
 - thomasgauvin
+- ThomasTheTitan
 - thomasverleye
 - ThornWu
 - tiborbarsi

packages/react-router/lib/components.tsx

@@ -44,6 +44,7 @@ import {
   AwaitContext,
   DataRouterContext,
   DataRouterStateContext,
+  ENABLE_DEV_WARNINGS,
   FetchersContext,
   LocationContext,
   NavigationContext,
@@ -63,10 +64,6 @@ import {
 import type { ViewTransition } from "./dom/global";
 import { warnOnce } from "./server-runtime/warnings";
 
-// Provided by the build system
-declare const __DEV__: boolean;
-const ENABLE_DEV_WARNINGS = __DEV__;
-
 /**
  * @private
  */

packages/react-router/lib/context.ts

@@ -201,3 +201,7 @@ RouteContext.displayName = "Route";
 
 export const RouteErrorContext = React.createContext<any>(null);
 RouteErrorContext.displayName = "RouteError";
+
+// Provided by the build system
+declare const __DEV__: boolean;
+export const ENABLE_DEV_WARNINGS = __DEV__;

packages/react-router/lib/dom/ssr/errorBoundaries.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Scripts, useFrameworkContext } from "./components";
 import type { Location } from "../../router/history";
 import { isRouteErrorResponse } from "../../router/utils";
+import { ENABLE_DEV_WARNINGS } from "../../context";
 
 type RemixErrorBoundaryProps = React.PropsWithChildren<{
   location: Location;
@@ -83,7 +84,7 @@ export function RemixRootDefaultErrorBoundary({
       dangerouslySetInnerHTML={{
         __html: `
         console.log(
-          "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
+          "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://reactrouter.com/how-to/error-boundary for more information."
         );
       `,
       }}
@@ -96,7 +97,7 @@ export function RemixRootDefaultErrorBoundary({
         <h1 style={{ fontSize: "24px" }}>
           {error.status} {error.statusText}
         </h1>
-        {heyDeveloper}
+        {ENABLE_DEV_WARNINGS ? heyDeveloper : null}
       </BoundaryShell>
     );
   }

packages/react-router/lib/dom/ssr/fallback.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { BoundaryShell } from "./errorBoundaries";
+import { ENABLE_DEV_WARNINGS } from "../../context";
 
 // If the user sets `clientLoader.hydrate=true` somewhere but does not
 // provide a `HydrateFallback` at any level of the tree, then we need to at
@@ -9,18 +10,20 @@ import { BoundaryShell } from "./errorBoundaries";
 export function RemixRootDefaultHydrateFallback() {
   return (
     <BoundaryShell title="Loading..." renderScripts>
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
+      {ENABLE_DEV_WARNINGS ? (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
               console.log(
                 "💿 Hey developer 👋. You can provide a way better UX than this " +
                 "when your app is loading JS modules and/or running \`clientLoader\` " +
-                "functions. Check out https://remix.run/route/hydrate-fallback " +
+                "functions. Check out https://reactrouter.com/start/framework/route-module#hydratefallback " +
                 "for more information."
               );
             `,
-        }}
-      />
+          }}
+        />
+      ) : null}
     </BoundaryShell>
   );
 }

packages/react-router/lib/hooks.tsx

@@ -10,6 +10,7 @@ import {
   AwaitContext,
   DataRouterContext,
   DataRouterStateContext,
+  ENABLE_DEV_WARNINGS,
   LocationContext,
   NavigationContext,
   RouteContext,
@@ -51,10 +52,6 @@ import {
 } from "./router/utils";
 import type { SerializeFrom } from "./types/route-data";
 
-// Provided by the build system
-declare const __DEV__: boolean;
-const ENABLE_DEV_WARNINGS = __DEV__;
-
 /**
   Resolves a URL against the current location.