rsbuild-plugin-react-router 0.7.3 → 0.8.0

package/dist/manifest-assets.d.ts

@@ -0,0 +1,34 @@
+export type ReactRouterManifestStats = {
+    assetsByChunkName?: Record<string, string[]>;
+    entrypointFilesByName?: Record<string, string[]>;
+    assetTypesByName?: Record<string, string>;
+};
+type ManifestStatsChunk = {
+    files?: Iterable<string>;
+};
+type ManifestStatsEntrypoint = {
+    getFiles?: () => Iterable<string>;
+};
+type ManifestStatsLookup<T> = Iterable<[string, T | null | undefined]> & {
+    get?: (name: string) => T | null | undefined;
+};
+type ManifestStatsCompilation = {
+    namedChunks: ManifestStatsLookup<ManifestStatsChunk>;
+    entrypoints?: ManifestStatsLookup<ManifestStatsEntrypoint>;
+    getAsset?: (name: string) => {
+        name?: string;
+        info?: {
+            assetType?: string;
+            javascriptModule?: boolean;
+        };
+    } | void;
+};
+export declare const stripAssetQuery: (name: string) => string;
+export declare const getManifestAssetType: (name: string, assetTypesByName?: Readonly<Record<string, string>>) => string | undefined;
+export declare const createReactRouterManifestStats: (compilation: ManifestStatsCompilation | undefined, chunkNames?: ReadonlySet<string>) => ReactRouterManifestStats | undefined;
+type ChunkAssets = {
+    js: string[];
+    css: string[];
+};
+export declare const createChunkAssetResolver: (clientStats: ReactRouterManifestStats | undefined, includeEntrypointJavaScript: boolean) => ((chunkName: string) => ChunkAssets);
+export {};

package/dist/manifest-snapshot.d.ts

@@ -0,0 +1,17 @@
+import type { ReactRouterManifestForDev, RouteManifestModuleExports } from './manifest.js';
+import type { ReactRouterServerBuildPlan } from './server-build-plan.js';
+import type { Route } from './types.js';
+export type ReactRouterManifestSnapshot = {
+    browser: ReactRouterManifestForDev;
+    moduleExportsByRouteId: RouteManifestModuleExports;
+    server: ReactRouterManifestForDev;
+    serverByBundleId: Readonly<Record<string, ReactRouterManifestForDev>>;
+    serverByEntryName: Readonly<Record<string, ReactRouterManifestForDev>>;
+};
+export declare const createReactRouterManifestSnapshot: ({ manifest, sri, moduleExportsByRouteId, serverBuildPlan, routesByServerBundleId, }: {
+    manifest: ReactRouterManifestForDev;
+    sri: ReactRouterManifestForDev["sri"];
+    moduleExportsByRouteId: RouteManifestModuleExports;
+    serverBuildPlan: Pick<ReactRouterServerBuildPlan, "defaultEntryName" | "serverBundleEntries">;
+    routesByServerBundleId: Readonly<Record<string, Readonly<Record<string, Route>>>>;
+}) => ReactRouterManifestSnapshot;

package/dist/manifest-state.d.ts

@@ -0,0 +1,12 @@
+import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
+import type { ReactRouterManifestSnapshot } from './manifest-snapshot.js';
+type ReactRouterManifestState = {
+    stage(compilation: Rspack.Compilation, snapshot: ReactRouterManifestSnapshot): void;
+    read(): ReactRouterManifestSnapshot | null;
+};
+export declare const createReactRouterManifestState: ({ api, isBuild, onPublish, }: {
+    api: Pick<RsbuildPluginAPI, "onBeforeEnvironmentCompile" | "onAfterEnvironmentCompile">;
+    isBuild: boolean;
+    onPublish: (compilation: Rspack.Compilation, snapshot: ReactRouterManifestSnapshot) => void;
+}) => ReactRouterManifestState;
+export {};

package/dist/manifest.d.ts

@@ -1,3 +1,5 @@
+import { type ReactRouterManifestStats } from './manifest-assets.js';
+export { createReactRouterManifestStats, type ReactRouterManifestStats, } from './manifest-assets.js';
 import type { Route, PluginOptions, RouteManifestItem } from './types.js';
 import { type RouteChunkCache } from './route-chunks.js';
 import { type RouteModuleAnalysis } from './export-utils.js';
@@ -44,26 +46,6 @@ export type ReactRouterManifestForDev = {
     sri?: Record<string, string> | true;
     routes: Record<string, RouteManifestItem>;
 };
-export type ReactRouterManifestStats = {
-    assetsByChunkName?: Record<string, string[]>;
-    entrypointFilesByName?: Record<string, string[]>;
-};
-type ReactRouterManifestStatsChunk = {
-    files?: Iterable<string>;
-};
-type ReactRouterManifestStatsEntrypoint = {
-    getFiles?: () => Iterable<string>;
-};
-type ReactRouterManifestStatsLookup<T> = Iterable<[
-    string,
-    T | null | undefined
-]> & {
-    get?: (name: string) => T | null | undefined;
-};
-type ReactRouterManifestStatsCompilation = {
-    namedChunks: ReactRouterManifestStatsLookup<ReactRouterManifestStatsChunk>;
-    entrypoints?: ReactRouterManifestStatsLookup<ReactRouterManifestStatsEntrypoint>;
-};
 export declare const isManifestJsAsset: (asset: string) => boolean;
 export declare const isManifestCssAsset: (asset: string) => boolean;
 /**
@@ -95,7 +77,6 @@ export type RscScriptAssetChunk = {
  * emits it, so function templates and `tools.rspack` overrides are covered.
  */
 export declare const collectUnsupportedRscScriptAssets: (compilation: RscScriptAssetCompilation) => string[];
-export declare const createReactRouterManifestStats: (compilation: ReactRouterManifestStatsCompilation | undefined, chunkNames?: ReadonlySet<string>) => ReactRouterManifestStats | undefined;
 export type RouteManifestModuleExports = Record<string, readonly string[]>;
 export type ReactRouterManifestGenerationResult = {
     manifest: ReactRouterManifestForDev;
@@ -109,4 +90,3 @@ export declare const getReactRouterManifestPath: ({ version, isBuild, entryModul
 export declare const getReactRouterManifestChunkNames: (routes: Record<string, Route>, appDirectory: string, splitRouteModules?: boolean | "enforce") => Set<string>;
 export declare function generateReactRouterManifestForDev(routes: Record<string, Route>, _options: PluginOptions, clientStats: ReactRouterManifestStats | undefined, context: string, assetPrefix?: string, manifestOptions?: ReactRouterManifestOptions): Promise<ReactRouterManifestGenerationResult>;
 export declare function getReactRouterManifestForDev(...args: Parameters<typeof generateReactRouterManifestForDev>): Promise<ReactRouterManifestForDev>;
-export {};

package/dist/modify-browser-manifest.d.ts

@@ -15,6 +15,8 @@ type CompilationAssetWithIntegrity = {
     };
     info?: {
         integrity?: unknown;
+        assetType?: string;
+        javascriptModule?: boolean;
     };
 };
 type CompilationWithIntegrityAssets = {

package/dist/node-only-manifest.d.ts

@@ -0,0 +1,8 @@
+import { type RsbuildPluginAPI } from '@rsbuild/core';
+import type { ReactRouterManifestSnapshot } from './manifest-snapshot.js';
+import type { Route } from './types.js';
+export declare const registerNodeOnlyManifestValidation: ({ api, routeByFilePath, getSnapshot, }: {
+    api: RsbuildPluginAPI;
+    routeByFilePath: ReadonlyMap<string, Route>;
+    getSnapshot: () => ReactRouterManifestSnapshot | null;
+}) => void;

package/dist/plugin-utils.d.ts

@@ -1,4 +1,4 @@
-export declare const resolveAppPackagePath: (specifier: string) => string | undefined;
+export declare const resolveAppPackagePath: (specifier: string, rootPath?: string) => string | undefined;
 export declare const parseVersionMajorMinor: (version: string | undefined) => {
     major: number;
     minor: number;

package/dist/types.d.ts

@@ -9,6 +9,12 @@ export type Route = {
     children?: Route[];
 };
 export type PluginOptions = {
+    /**
+     * Generate React Router route types during development and builds.
+     * Set to false when type generation is managed separately.
+     * @default true
+     */
+    typegen?: boolean;
     /**
      * Whether to disable automatic middleware setup for custom server implementation.
      * Use this when you want to handle server setup manually.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsbuild-plugin-react-router",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "React Router plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -86,7 +86,7 @@
     "@react-router/fs-routes": "^8.3.1",
     "@react-router/remix-routes-option-adapter": "^8.3.1",
     "@react-router/serve": "^8.3.1",
-    "@rsbuild/core": "2.2.0",
+    "@rsbuild/core": "2.2.8",
     "@rsbuild/plugin-less": "1.6.4",
     "@rsbuild/plugin-mdx": "^1.1.3",
     "@rsbuild/plugin-react": "2.1.0",
@@ -94,7 +94,7 @@
     "@rsbuild/plugin-svgr": "2.0.4",
     "@rsbuild/plugin-tailwindcss": "2.0.3",
     "@rslib/core": "^0.23.2",
-    "@rspack/core": "2.2.0",
+    "@rspack/core": "2.2.6",
     "@rstest/core": "^0.11.4",
     "@rstest/coverage-istanbul": "^0.11.4",
     "@swc/helpers": "^0.5.23",
@@ -136,7 +136,7 @@
   },
   "peerDependencies": {
     "@react-router/dev": "^7.13.0 || ^8.0.0",
-    "@rsbuild/core": "^2.2.0",
+    "@rsbuild/core": "^2.2.8",
     "react-router": "^7.13.0 || ^8.0.0",
     "react-server-dom-rspack": "0.1.0",
     "rsbuild-plugin-rsc": "^0.1.1"

package/src/build-output-transforms.ts

@@ -226,6 +226,11 @@ export const registerBuildOutputTransforms = ({
           );
           const bundleId = bundleMatch?.[1]?.replace(/\.js$/, '');
           const latestServerManifest = getLatestServerManifest();
+          if (isBuild && !latestServerManifest) {
+            throw new Error(
+              `[${PLUGIN_NAME}] Production server manifest requested before the browser manifest was finalized.`
+            );
+          }
           const manifest =
             (latestServerManifest
               ? ((bundleId && getLatestServerManifestByBundleId(bundleId)) ??

package/src/classic-mode.ts

@@ -125,7 +125,6 @@ export const createClassicBuildArtifacts = async ({
       isBuild,
       buildPlan: serverBuildPlan,
       clientPatchesRouteMetadata: devHmr?.isEnabled,
-      onNodeRebuildCommitted: devHmr?.onNodeRebuildCommitted,
     }),
     prerenderPaths,
     routesByServerBundleId,

package/src/constants.ts

@@ -93,3 +93,6 @@ export const CLIENT_EXPORTS = {
 
 // SPA-mode prerender fallback document, served when no prerendered page matches.
 export const SPA_FALLBACK_HTML_FILE = '__spa-fallback.html';
+
+export const BROWSER_MANIFEST_ENTRY_NAME =
+  'virtual/react-router/browser-manifest';

package/src/dev-hdr-channel.ts

@@ -0,0 +1,38 @@
+import { randomUUID } from 'node:crypto';
+import type { RsbuildDevServer } from '@rsbuild/core';
+
+export const DEV_HDR_UPDATE_EVENT = 'react-router:hdr-update';
+
+export const createDevHdrChannel = ({
+  hot,
+  isEnabled,
+}: {
+  hot: RsbuildDevServer['environments'][string]['hot'];
+  isEnabled: () => boolean;
+}) => {
+  const sessionId = randomUUID();
+  let revision = 0;
+  let closed = false;
+  const payload = () => ({
+    event: DEV_HDR_UPDATE_EVENT,
+    data: { sessionId, revision },
+  });
+  const unsubscribe = hot.onConnect(client => {
+    if (!closed && isEnabled() && revision > 0) {
+      client.send('custom', payload());
+    }
+  });
+
+  return {
+    publish(): void {
+      if (closed || !isEnabled()) return;
+      revision += 1;
+      hot.send('custom', payload());
+    },
+    close(): void {
+      if (closed) return;
+      closed = true;
+      unsubscribe();
+    },
+  };
+};

package/src/dev-hmr.ts

@@ -1,7 +1,7 @@
-import { mkdirSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import type { Rspack } from '@rsbuild/core';
-import { dirname, join } from 'pathe';
+import { join } from 'pathe';
+import { DEV_HDR_UPDATE_EVENT } from './dev-hdr-channel.js';
 
 export const DEV_HMR_RUNTIME_MODULE_ID = 'virtual/react-router/hmr-runtime';
 export const DEV_MANIFEST_UPDATE_EVENT = 'react-router:manifest-update';
@@ -9,7 +9,6 @@ export const DEV_MANIFEST_UPDATE_EVENT = 'react-router:manifest-update';
 export type DevHmrPlanOptions = {
   isEnabled: () => boolean;
   runtimeModule: string;
-  onNodeRebuildCommitted: () => void;
 };
 
 type SwcLoaderOptions = {
@@ -80,57 +79,6 @@ export const resolveReactRefreshRuntimePath = (
   }
 };
 
-const hdrRevisionModuleContent = (revision: number): string =>
-  `export default ${revision};\n`;
-
-/**
- * The HDR revision module is a real file (not a virtual module) because it
- * must wake the web compiler through the regular file watcher: the browser
- * HMR runtime imports it, so bumping the revision produces a web hot update
- * whenever server code changes, which the client answers by revalidating
- * React Router loader data.
- */
-export const getDevHdrRevisionFilePath = (rootPath: string): string =>
-  join(rootPath, '.react-router', 'hdr-revision.mjs');
-
-export type DevHdrRevisionSignal = {
-  filePath: string;
-  /** Writes the initial revision module so the first compile can resolve it. */
-  ensure: () => void;
-  /** Increments the revision, signaling hot data revalidation to the client. */
-  bump: () => void;
-};
-
-export const createDevHdrRevisionSignal = ({
-  filePath,
-  onError,
-}: {
-  filePath: string;
-  onError?: (error: Error) => void;
-}): DevHdrRevisionSignal => {
-  let revision = 0;
-  let dirEnsured = false;
-  const write = (): void => {
-    try {
-      if (!dirEnsured) {
-        mkdirSync(dirname(filePath), { recursive: true });
-        dirEnsured = true;
-      }
-      writeFileSync(filePath, hdrRevisionModuleContent(revision));
-    } catch (error) {
-      onError?.(error instanceof Error ? error : new Error(String(error)));
-    }
-  };
-  return {
-    filePath,
-    ensure: write,
-    bump() {
-      revision += 1;
-      write();
-    },
-  };
-};
-
 /**
  * Browser-side HMR runtime shared by all route client entries in development.
  *
@@ -143,20 +91,10 @@ export const createDevHdrRevisionSignal = ({
  */
 export const generateDevHmrRuntimeModule = ({
   reactRefreshRuntimePath,
-  hdrRevisionFilePath,
 }: {
   reactRefreshRuntimePath: string;
-  hdrRevisionFilePath: string;
 }): string => `
 import * as __refreshRuntimeModule from ${JSON.stringify(reactRefreshRuntimePath)};
-// Read revision so the import survives sideEffects: false tree-shaking.
-import __hdrRevision from ${JSON.stringify(hdrRevisionFilePath)};
-
-let latestHdrRevision = __hdrRevision;
-
-export function getReactRouterHdrRevision() {
-  return latestHdrRevision;
-}
 
 const RefreshRuntime =
   __refreshRuntimeModule && __refreshRuntimeModule.performReactRefresh
@@ -166,7 +104,24 @@ const RefreshRuntime =
 const pendingRouteUpdates = new Map();
 let flushTimeout;
 let pendingRevalidation = false;
-let pendingComponentRouteRevalidation = false;
+let flushing = false;
+let hdrSession;
+let latestHdrRevision = 0;
+const retiredHdrSessions = new Set();
+
+function receiveHdrRevision(message) {
+  if (!message || typeof message.sessionId !== 'string' ||
+      !Number.isSafeInteger(message.revision) || message.revision < 1 ||
+      retiredHdrSessions.has(message.sessionId)) return;
+  if (hdrSession !== message.sessionId) {
+    if (hdrSession) retiredHdrSessions.add(hdrSession);
+    hdrSession = message.sessionId;
+    latestHdrRevision = 0;
+  }
+  if (message.revision <= latestHdrRevision) return;
+  latestHdrRevision = message.revision;
+  scheduleReactRouterRevalidation();
+}
 
 function getCurrentRouterPath(router) {
   const basename = router.basename || '/';
@@ -207,7 +162,7 @@ export function scheduleReactRouterRouteUpdate(
   scheduleFlush();
 }
 
-export function scheduleReactRouterRevalidation() {
+function scheduleReactRouterRevalidation() {
   pendingRevalidation = true;
   scheduleFlush();
 }
@@ -406,45 +361,50 @@ function applyManifestUpdate(nextRoutes) {
 }
 
 async function flush() {
+  if (flushing) return;
+  if (import.meta.webpackHot && import.meta.webpackHot.status() !== 'idle') {
+    scheduleFlush();
+    return;
+  }
   const router = window.__reactRouterDataRouter;
   const routeModules = window.__reactRouterRouteModules;
   const manifest = window.__reactRouterManifest;
   const context = window.__reactRouterContext;
   if (!router || !routeModules || !manifest || !context) {
+    scheduleFlush();
     return;
   }
-
-  let shouldRevalidate = pendingRevalidation;
-  pendingRevalidation = false;
-  const { nextManifest, hmrRoutes, shouldRefreshRouteState } =
-    applyPendingRouteUpdates(router, routeModules, manifest, context);
-  // Loader updates must be visible during revalidation. Component-only routes
-  // stay staged until revalidation completes, matching React Router's HMR flow.
-  if (nextManifest && shouldRefreshRouteState) {
-    pendingComponentRouteRevalidation = false;
-    if (hmrRoutes) {
-      patchCurrentRouteMatches(router, hmrRoutes);
-    }
-    Object.assign(manifest, nextManifest);
-    await refreshRouteState(router);
-    shouldRevalidate = false;
-  } else if (nextManifest) {
-    if (hmrRoutes) {
-      patchCurrentRouteMatches(router, hmrRoutes);
+  flushing = true;
+  try {
+    let shouldRevalidate = pendingRevalidation;
+    pendingRevalidation = false;
+    const { nextManifest, hmrRoutes, shouldRefreshRouteState } =
+      applyPendingRouteUpdates(router, routeModules, manifest, context);
+    // Loader updates must be visible during revalidation. Component-only routes
+    // stay staged until revalidation completes, matching React Router's HMR flow.
+    if (nextManifest && shouldRefreshRouteState) {
+      if (hmrRoutes) {
+        patchCurrentRouteMatches(router, hmrRoutes);
+      }
+      Object.assign(manifest, nextManifest);
+      await refreshRouteState(router);
+      shouldRevalidate = false;
+    } else if (nextManifest) {
+      if (hmrRoutes) {
+        patchCurrentRouteMatches(router, hmrRoutes);
+      }
+      Object.assign(manifest, nextManifest);
     }
-    Object.assign(manifest, nextManifest);
-    // The node compiler also emits an HDR revision for this route edit. If it
-    // did not arrive in this flush, consume that redundant revalidation later.
-    pendingComponentRouteRevalidation = !shouldRevalidate;
-    shouldRevalidate = false;
-  } else if (shouldRevalidate) {
-    if (pendingComponentRouteRevalidation) {
-      pendingComponentRouteRevalidation = false;
-    } else {
+    // A replay may represent several server edits, not just the component
+    // update in this batch. Only an actual data revalidation can consume it.
+    if (shouldRevalidate) {
       await revalidateRouter(router);
     }
+    performReactRefresh();
+  } finally {
+    flushing = false;
+    if (pendingRevalidation || pendingRouteUpdates.size > 0) scheduleFlush();
   }
-  performReactRefresh();
 }
 
 if (typeof window !== 'undefined' && import.meta.webpackHot) {
@@ -452,12 +412,9 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
     ${JSON.stringify(DEV_MANIFEST_UPDATE_EVENT)},
     applyManifestUpdate
   );
-  import.meta.webpackHot.accept(
-    ${JSON.stringify(hdrRevisionFilePath)},
-    () => {
-      latestHdrRevision = __hdrRevision;
-      scheduleReactRouterRevalidation();
-    }
+  import.meta.webpackHot.on(
+    ${JSON.stringify(DEV_HDR_UPDATE_EVENT)},
+    receiveHdrRevision
   );
 }
 `;

package/src/dev-runtime-controller.ts

@@ -20,6 +20,7 @@ import {
   unregisterReactRouterDevRuntime,
 } from './dev-generation.js';
 import { createDevHdrIntentTracker } from './dev-hdr-intent.js';
+import { createDevHdrChannel } from './dev-hdr-channel.js';
 import { DEV_MANIFEST_UPDATE_EVENT } from './dev-hmr.js';
 import {
   getEnvironmentStats,
@@ -57,18 +58,10 @@ type CreateControllerOptions = {
    * flags) in place, so metadata-only changes no longer need a full reload.
    */
   clientPatchesRouteMetadata?: boolean | (() => boolean);
-  /**
-   * Invoked after a development attempt commits a re-evaluated node build for
-   * changed server files. Used to signal hot data revalidation to the client.
-   */
-  onNodeRebuildCommitted?: () => void;
 };
 
 const CSS_SOURCE_RELOAD_DELAY_MS = 1000;
 
-const isHdrRevisionFile = (file: string): boolean =>
-  file.includes('.react-router/hdr-revision.mjs');
-
 const isCssSourceFile = (file: string): boolean =>
   /\.css(?:\.[cm]?[jt]s)?$/.test(file);
 
@@ -77,7 +70,6 @@ export const createReactRouterDevRuntimeController = ({
   isBuild,
   buildPlan,
   clientPatchesRouteMetadata,
-  onNodeRebuildCommitted,
 }: CreateControllerOptions): ReactRouterDevRuntimeController => {
   if (isBuild) {
     return {
@@ -122,7 +114,18 @@ export const createReactRouterDevRuntimeController = ({
     }, CSS_SOURCE_RELOAD_DELAY_MS);
   };
 
+  const hdrChannels = new WeakMap<
+    RuntimeBinding,
+    ReturnType<typeof createDevHdrChannel>
+  >();
+  const isHmrEnabled = () =>
+    typeof clientPatchesRouteMetadata === 'function'
+      ? clientPatchesRouteMetadata()
+      : clientPatchesRouteMetadata === true;
+
   const closeBinding = (binding: RuntimeBinding, error?: Error): void => {
+    hdrChannels.get(binding)?.close();
+    hdrChannels.delete(binding);
     if (scheduledCssAssetOwnershipReload) {
       clearTimeout(scheduledCssAssetOwnershipReload);
       scheduledCssAssetOwnershipReload = undefined;
@@ -174,7 +177,7 @@ export const createReactRouterDevRuntimeController = ({
         identity.node === binding.runtime.getCommittedNodeIdentity()
       ) {
         hdrIntentsByPair.get(pair)?.signalCommitted(nodeCompilation, () => {
-          onNodeRebuildCommitted?.();
+          hdrChannels.get(binding)?.publish();
         });
       }
     } catch (cause) {
@@ -278,11 +281,7 @@ export const createReactRouterDevRuntimeController = ({
           if (sessions.getActiveBinding()?.runtime !== runtime) {
             return;
           }
-          const patchesRouteMetadata =
-            typeof clientPatchesRouteMetadata === 'function'
-              ? clientPatchesRouteMetadata()
-              : clientPatchesRouteMetadata;
-          if (patchesRouteMetadata) {
+          if (isHmrEnabled()) {
             server.sockWrite('custom', {
               event: DEV_MANIFEST_UPDATE_EVENT,
               data: manifest.routes,
@@ -294,6 +293,14 @@ export const createReactRouterDevRuntimeController = ({
         onWarning: message => api.logger.warn(message),
       });
       const binding = sessions.createBinding(server, runtime);
+      hdrChannels.set(
+        binding,
+        createDevHdrChannel({
+          hot: server.environments.web.hot,
+          isEnabled: () =>
+            sessions.getActiveBinding() === binding && isHmrEnabled(),
+        })
+      );
       registerReactRouterDevRuntime(server, runtime);
       sessions.bindCloseObservation(binding);
     },
@@ -430,9 +437,7 @@ export const createReactRouterDevRuntimeController = ({
         hdrIntents.capture(
           compilation,
           changes.known &&
-            Array.from(changes.files).some(
-              file => !isHdrRevisionFile(file) && !isCssSourceFile(file)
-            )
+            Array.from(changes.files).some(file => !isCssSourceFile(file))
         );
         pair.latestNodeStart = {
           status: 'started',

package/src/dev-server.ts

@@ -1,7 +1,9 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
+import { pathToFileURL } from 'node:url';
 import type { RsbuildConfig } from '@rsbuild/core';
 import type { ServerBuild } from 'react-router';
 import { installDevServerSourceMapSupport } from './dev-source-maps.js';
+import { resolveAppPackagePath } from './plugin-utils.js';
 
 export type ServerSetup = Exclude<
   NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
@@ -18,6 +20,7 @@ type RequestHandler = (request: Request) => Response | Promise<Response>;
 type BuildProvider = () => Promise<ServerBuild>;
 
 export type DevServerMiddlewareDependencies = {
+  rootPath: string;
   loadBuild: BuildProvider;
   createRequestHandler?: (
     build: BuildProvider,
@@ -39,9 +42,22 @@ export const createDevServerMiddleware = (
 
   const getListener = () => {
     listenerPromise ??= (async () => {
-      const createRequestHandler =
-        dependencies.createRequestHandler ??
-        (await import('react-router')).createRequestHandler;
+      let createRequestHandler = dependencies.createRequestHandler;
+      if (!createRequestHandler) {
+        const reactRouterPath = resolveAppPackagePath(
+          'react-router',
+          dependencies.rootPath
+        );
+        if (!reactRouterPath) {
+          throw new Error('Cannot resolve react-router from the application.');
+        }
+        // Match the application's browser/server bundles, including when the
+        // plugin is linked from a workspace with a different Router version.
+        const routerModule: typeof import('react-router') = await import(
+          pathToFileURL(reactRouterPath).href
+        );
+        createRequestHandler = routerModule.createRequestHandler;
+      }
       const createRequestListener =
         dependencies.createRequestListener ??
         (await import('@remix-run/node-fetch-server')).createRequestListener;
@@ -73,8 +89,10 @@ export const createDevServerMiddleware = (
 
 export const createReactRouterDevServerSetup = ({
   loadBuild,
+  rootPath,
 }: {
   loadBuild: BuildProvider;
+  rootPath: string;
 }): ServerSetup =>
   function reactRouterDevServerSetup(context) {
     if (context.action !== 'dev') {
@@ -85,6 +103,8 @@ export const createReactRouterDevServerSetup = ({
     // request handler.
     return () => {
       installDevServerSourceMapSupport();
-      context.server.middlewares.use(createDevServerMiddleware({ loadBuild }));
+      context.server.middlewares.use(
+        createDevServerMiddleware({ loadBuild, rootPath })
+      );
     };
   };