chore: re-enable development warnings (#12269)

* chore: re-enable development warnings

* remove warning as we are testing against production build. It is covered in unit tests

* Create four-needles-search.md

* chore: add ssr conditions / external conditions

.changeset/four-needles-search.md

@@ -0,0 +1,7 @@
+---
+"integration": patch
+"@react-router/dev": patch
+"react-router": patch
+---
+
+chore: re-enable development warnings through a `development` exports condition.

integration/vite-spa-mode-test.ts

@@ -566,16 +566,6 @@ test.describe("SPA Mode", () => {
       await page.waitForSelector("[data-root]");
       expect(await page.locator("[data-root]").textContent()).toBe("Root");
       expect(await page.locator("[data-index]").textContent()).toBe("Index");
-
-      // Hydrates without issues - this message is expected due to the nested <Routes>
-      expect(logs).toEqual([
-        'You rendered descendant <Routes> (or called `useRoutes()`) at "/" ' +
-          '(under <Route path="">) but the parent route path has no trailing "*". ' +
-          "This means if you navigate deeper, the parent won't match anymore and " +
-          "therefore the child routes will never render." +
-          "\n\n" +
-          'Please change the parent <Route path=""> to <Route path="/*">.',
-      ]);
     });
 
     test("wraps default root HydrateFallback in user-provided Layout", async ({

jest/jest.config.shared.js

@@ -24,4 +24,7 @@ module.exports = {
     "\\.[jt]sx?$": require.resolve("./transform"),
   },
   watchPathIgnorePatterns: [...ignorePatterns, "\\/node_modules\\/"],
+  globals: {
+    __DEV__: true,
+  },
 };

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

@@ -821,6 +821,11 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
 
           ssr: {
             external: ssrExternals,
+            resolve: {
+              conditions: viteCommand === "build" ? [] : ["development"],
+              externalConditions:
+                viteCommand === "build" ? [] : ["development"],
+            },
           },
           optimizeDeps: {
             include: [
@@ -858,6 +863,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
               "react-router/dom",
               "react-router-dom",
             ],
+            conditions: viteCommand === "build" ? [] : ["development"],
           },
           base: viteUserConfig.base,
 

packages/react-router/lib/components.tsx

@@ -62,9 +62,9 @@ import {
 import type { ViewTransition } from "./dom/global";
 import { warnOnce } from "./server-runtime/warnings";
 
-// TODO: Let's get this back to using an import map and development/production
-// condition once we get the rollup build replaced
-const ENABLE_DEV_WARNINGS = true;
+// Provided by the build system
+declare const __DEV__: boolean;
+const ENABLE_DEV_WARNINGS = __DEV__;
 
 /**
  * @private

packages/react-router/lib/hooks.tsx

@@ -50,9 +50,9 @@ import {
 } from "./router/utils";
 import type { SerializeFrom } from "./types";
 
-// TODO: Let's get this back to using an import map and development/production
-// condition once we get the rollup build replaced
-const ENABLE_DEV_WARNINGS = true;
+// Provided by the build system
+declare const __DEV__: boolean;
+const ENABLE_DEV_WARNINGS = __DEV__;
 
 /**
   Resolves a URL against the current location.

packages/react-router/package.json

@@ -18,42 +18,53 @@
   "license": "MIT",
   "author": "Remix Software <hello@remix.run>",
   "sideEffects": false,
-  "types": "./dist/index.d.ts",
-  "main": "./dist/index.js",
-  "unpkg": "./dist/umd/react-router.production.min.js",
-  "module": "./dist/index.mjs",
+  "types": "./dist/production/index.d.ts",
+  "main": "./dist/production/index.js",
+  "module": "./dist/production/index.mjs",
   "exports": {
     ".": {
       "node": {
-        "types": "./dist/index.d.ts",
-        "module-sync": "./dist/index.mjs",
-        "default": "./dist/index.js"
+        "types": "./dist/production/index.d.ts",
+        "development": {
+          "module-sync": "./dist/development/index.mjs",
+          "default": "./dist/development/index.js"
+        },
+        "module-sync": "./dist/production/index.mjs",
+        "default": "./dist/production/index.js"
       },
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
+        "types": "./dist/production/index.d.mts",
+        "development": "./dist/development/index.mjs",
+        "default": "./dist/production/index.mjs"
       },
       "default": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./dist/production/index.d.ts",
+        "development": "./dist/development/index.js",
+        "default": "./dist/production/index.js"
       }
     },
     "./types": {
-      "types": "./dist/lib/types.d.ts"
+      "types": "./dist/production/lib/types.d.ts"
     },
     "./dom": {
       "node": {
-        "types": "./dist/dom-export.d.ts",
-        "module-sync": "./dist/dom-export.mjs",
-        "default": "./dist/dom-export.js"
+        "types": "./dist/production/dom-export.d.ts",
+        "development": {
+          "module-sync": "./dist/development/dom-export.mjs",
+          "default": "./dist/development/dom-export.js"
+        },
+        "module-sync": "./dist/production/dom-export.mjs",
+        "default": "./dist/production/dom-export.js"
       },
       "import": {
-        "types": "./dist/dom-export.d.mts",
-        "default": "./dist/dom-export.mjs"
+        "types": "./dist/production/dom-export.d.mts",
+        "development": "./dist/development/dom-export.mjs",
+        "default": "./dist/production/dom-export.mjs"
       },
       "default": {
-        "types": "./dist/dom-export.d.ts",
-        "default": "./dist/dom-export.js"
+        "types": "./dist/production/dom-export.d.ts",
+        "development": "./dist/development/dom-export.js",
+        "default": "./dist/production/dom-export.js"
       }
     },
     "./package.json": "./package.json"

packages/react-router/tsup.config.ts

@@ -7,32 +7,37 @@ import pkg from "./package.json";
 
 const entry = ["index.ts", "dom-export.ts", "lib/types.ts"];
 
-export default defineConfig([
-  {
-    clean: false,
-    entry,
-    format: ["cjs"],
-    outDir: "dist",
-    dts: true,
-    banner: {
-      js: createBanner(pkg.name, pkg.version),
+const config = (enableDevWarnings: boolean) =>
+  defineConfig([
+    {
+      clean: false,
+      entry,
+      format: ["cjs"],
+      outDir: enableDevWarnings ? "dist/development" : "dist/production",
+      dts: true,
+      banner: {
+        js: createBanner(pkg.name, pkg.version),
+      },
+      define: {
+        "import.meta.hot": "undefined",
+        REACT_ROUTER_VERSION: JSON.stringify(pkg.version),
+        __DEV__: JSON.stringify(enableDevWarnings),
+      },
     },
-    define: {
-      "import.meta.hot": "undefined",
-      REACT_ROUTER_VERSION: JSON.stringify(pkg.version),
+    {
+      clean: false,
+      entry,
+      format: ["esm"],
+      outDir: enableDevWarnings ? "dist/development" : "dist/production",
+      dts: true,
+      banner: {
+        js: createBanner(pkg.name, pkg.version),
+      },
+      define: {
+        REACT_ROUTER_VERSION: JSON.stringify(pkg.version),
+        __DEV__: JSON.stringify(enableDevWarnings),
+      },
     },
-  },
-  {
-    clean: false,
-    entry,
-    format: ["esm"],
-    outDir: "dist",
-    dts: true,
-    banner: {
-      js: createBanner(pkg.name, pkg.version),
-    },
-    define: {
-      REACT_ROUTER_VERSION: JSON.stringify(pkg.version),
-    },
-  },
-]);
+  ]);
+
+export default defineConfig([...config(false), ...config(true)]);