fix(dev): Use module-sync server condition when enabled (#12729)

Author: markdalgleish

.changeset/new-news-decide.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Use `module-sync` server condition when enabled in the runtime. This fixes React context mismatches (e.g. `useHref() may be used only in the context of a <Router> component.`) during development on Node 22.10.0+ when using libraries that have a peer dependency on React Router.

packages/react-router-dev/module-sync-enabled/false.cjs

@@ -0,0 +1 @@
+exports.default = false;

packages/react-router-dev/module-sync-enabled/index.d.mts

@@ -0,0 +1,2 @@
+declare const moduleSyncEnabled: boolean;
+export { moduleSyncEnabled };

packages/react-router-dev/module-sync-enabled/index.mjs

@@ -0,0 +1,4 @@
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+const moduleSyncEnabled = require("#module-sync-enabled").default;
+export { moduleSyncEnabled };

packages/react-router-dev/module-sync-enabled/true.mjs

@@ -0,0 +1,2 @@
+const moduleSyncEnabled = true;
+export default moduleSyncEnabled;

packages/react-router-dev/package.json

@@ -31,6 +31,12 @@
     },
     "./package.json": "./package.json"
   },
+  "imports": {
+    "#module-sync-enabled": {
+      "module-sync": "./module-sync-enabled/true.mjs",
+      "default": "./module-sync-enabled/false.cjs"
+    }
+  },
   "bin": {
     "react-router": "bin.js"
   },
@@ -44,6 +50,7 @@
       "files": [
         "cli/**",
         "config/**",
+        "module-sync-enabled/**",
         "typegen/**",
         "vite/**",
         "*.ts",
@@ -140,6 +147,7 @@
   },
   "files": [
     "dist/",
+    "module-sync-enabled/",
     "bin.js",
     "CHANGELOG.md",
     "LICENSE.md",

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

@@ -749,8 +749,16 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         let viteClientConditions: string[] = [
           ...(vite.defaultClientConditions ?? []),
         ];
+
+        let packageRoot = path.dirname(
+          require.resolve("@react-router/dev/package.json")
+        );
+        let { moduleSyncEnabled } = await import(
+          `file:///${path.join(packageRoot, "module-sync-enabled/index.mjs")}`
+        );
         let viteServerConditions: string[] = [
           ...(vite.defaultServerConditions ?? []),
+          ...(moduleSyncEnabled ? ["module-sync"] : []),
         ];
 
         logger = vite.createLogger(viteUserConfig.logLevel, {