rsbuild-plugin-react-router 0.5.0 → 0.6.1

package/src/dev-hmr.ts

@@ -3,9 +3,14 @@ import { createRequire } from 'node:module';
 import type { Rspack } from '@rsbuild/core';
 import { dirname, join } from 'pathe';
 
-import { HMR_PATCHABLE_ROUTE_FLAGS } from './route-artifacts.js';
-
 export const DEV_HMR_RUNTIME_MODULE_ID = 'virtual/react-router/hmr-runtime';
+export const DEV_MANIFEST_UPDATE_EVENT = 'react-router:manifest-update';
+
+export type DevHmrPlanOptions = {
+  isEnabled: () => boolean;
+  runtimeModule: string;
+  onNodeRebuildCommitted: () => void;
+};
 
 type SwcLoaderOptions = {
   jsc?: { transform?: { react?: { refresh?: boolean } } };
@@ -17,30 +22,21 @@ const isObject = (value: unknown): value is Record<string, unknown> =>
 const isSwcLoader = (loader: unknown): boolean =>
   typeof loader === 'string' && loader.includes('builtin:swc-loader');
 
-const hasReactRefresh = (options: unknown): boolean =>
-  (options as SwcLoaderOptions | undefined)?.jsc?.transform?.react?.refresh ===
-  true;
-
 const readSwcLoaderRefresh = (value: unknown): boolean => {
-  if (Array.isArray(value)) {
-    return value.some(readSwcLoaderRefresh);
-  }
-  if (!isObject(value)) {
-    return false;
-  }
+  if (Array.isArray(value)) return value.some(readSwcLoaderRefresh);
+  if (!isObject(value)) return false;
   if (isSwcLoader(value.loader)) {
-    return hasReactRefresh(value.options);
+    return (
+      (value.options as SwcLoaderOptions | undefined)?.jsc?.transform?.react
+        ?.refresh === true
+    );
   }
   return Object.values(value).some(readSwcLoaderRefresh);
 };
 
 const readRuleSwcRefresh = (rule: unknown): boolean => {
-  if (!isObject(rule)) {
-    return false;
-  }
-  if (isSwcLoader(rule.loader)) {
-    return hasReactRefresh(rule.options);
-  }
+  if (!isObject(rule)) return false;
+  if (isSwcLoader(rule.loader)) return readSwcLoaderRefresh(rule);
   return (
     readSwcLoaderRefresh(rule.use) ||
     readRuleSetSwcRefresh(rule.oneOf) ||
@@ -94,12 +90,11 @@ const hdrRevisionModuleContent = (revision: number): string =>
  * whenever server code changes, which the client answers by revalidating
  * React Router loader data.
  */
-export const DEV_HDR_REVISION_RELATIVE_PATH = '.react-router/hdr-revision.mjs';
-
 export const getDevHdrRevisionFilePath = (rootPath: string): string =>
-  join(rootPath, DEV_HDR_REVISION_RELATIVE_PATH);
+  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. */
@@ -127,6 +122,7 @@ export const createDevHdrRevisionSignal = ({
     }
   };
   return {
+    filePath,
     ensure: write,
     bump() {
       revision += 1;
@@ -138,7 +134,7 @@ export const createDevHdrRevisionSignal = ({
 /**
  * Browser-side HMR runtime shared by all route client entries in development.
  *
- * This mirrors React Router's Vite HMR contract (see `refresh-utils.mjs` in
+ * This mirrors React Router framework HMR contract (see `refresh-utils.mjs` in
  * `@react-router/dev`): route module updates are applied by patching
  * `window.__reactRouterRouteModules` while preserving the previous component
  * identities (React Fast Refresh swaps their implementations in place),
@@ -156,7 +152,11 @@ import * as __refreshRuntimeModule from ${JSON.stringify(reactRefreshRuntimePath
 // Read revision so the import survives sideEffects: false tree-shaking.
 import __hdrRevision from ${JSON.stringify(hdrRevisionFilePath)};
 
-void __hdrRevision;
+let latestHdrRevision = __hdrRevision;
+
+export function getReactRouterHdrRevision() {
+  return latestHdrRevision;
+}
 
 const RefreshRuntime =
   __refreshRuntimeModule && __refreshRuntimeModule.performReactRefresh
@@ -166,6 +166,7 @@ const RefreshRuntime =
 const pendingRouteUpdates = new Map();
 let flushTimeout;
 let pendingRevalidation = false;
+let pendingComponentRouteRevalidation = false;
 
 function getCurrentRouterPath(router) {
   const basename = router.basename || '/';
@@ -199,10 +200,10 @@ export function registerReactRouterRouteExports(routeId, moduleExports) {
 
 export function scheduleReactRouterRouteUpdate(
   routeId,
-  routeFlags,
+  routeMetadata,
   getRouteModuleExports
 ) {
-  pendingRouteUpdates.set(routeId, { routeFlags, getRouteModuleExports });
+  pendingRouteUpdates.set(routeId, { routeMetadata, getRouteModuleExports });
   scheduleFlush();
 }
 
@@ -228,16 +229,8 @@ function takePendingRouteUpdates() {
   return updates;
 }
 
-function getRouteMetadata(routeFlags) {
-  return {
-${HMR_PATCHABLE_ROUTE_FLAGS.map(
-  (flag, index) => `    ${flag}: Boolean(routeFlags & ${1 << index}),`
-).join('\n')}
-  };
-}
-
 function applyRouteModuleUpdate(routeId, update, routeEntry, routeModules) {
-  Object.assign(routeEntry, getRouteMetadata(update.routeFlags));
+  Object.assign(routeEntry, update.routeMetadata);
   const imported = update.getRouteModuleExports();
   registerReactRouterRouteExports(routeId, imported);
   const current = routeModules[routeId];
@@ -294,11 +287,7 @@ function patchCurrentRouteMatches(router, routes) {
 
 function applyPendingRouteUpdates(router, routeModules, manifest, context) {
   if (pendingRouteUpdates.size === 0) {
-    return {
-      nextManifest: undefined,
-      shouldRefreshRouteState: false,
-      routesToRevalidate: new Set(),
-    };
+    return { nextManifest: undefined, hmrRoutes: undefined };
   }
 
   // Clone only entries mutated before the manifest is committed in flush().
@@ -309,8 +298,7 @@ function applyPendingRouteUpdates(router, routeModules, manifest, context) {
     const existingEntry = nextManifest.routes[routeId];
     if (!existingEntry) continue;
 
-    // Shallow clone is enough: only top-level flags are mutated below.
-    const routeEntry = { ...existingEntry };
+    const routeEntry = JSON.parse(JSON.stringify(existingEntry));
     nextManifest.routes[routeId] = routeEntry;
     applyRouteModuleUpdate(routeId, update, routeEntry, routeModules);
     if (
@@ -332,54 +320,52 @@ function applyPendingRouteUpdates(router, routeModules, manifest, context) {
     }
   }
 
+  let hmrRoutes;
   if (
     typeof router.createRoutesForHMR === 'function' &&
     typeof router._internalSetRoutes === 'function'
   ) {
-    const routes = router.createRoutesForHMR(
+    hmrRoutes = router.createRoutesForHMR(
       routesToRevalidate,
       nextManifest.routes,
       routeModules,
       context.ssr,
       context.isSpaMode
     );
-    router._internalSetRoutes(routes);
-    patchCurrentRouteMatches(router, routes);
+    router._internalSetRoutes(hmrRoutes);
   }
 
-  return { nextManifest, shouldRefreshRouteState, routesToRevalidate };
+  return { nextManifest, hmrRoutes, shouldRefreshRouteState };
 }
 
-async function withHdrActive(fn) {
+async function revalidateRouter(router) {
   try {
     window.__reactRouterHdrActive = true;
-    await fn();
+    if (typeof router.revalidate === 'function') {
+      await router.revalidate();
+      return;
+    }
+    if (typeof router.navigate === 'function') {
+      await router.navigate(getCurrentRouterPath(router), {
+        replace: true,
+        preventScrollReset: true,
+      });
+    }
   } finally {
     window.__reactRouterHdrActive = false;
   }
 }
 
-async function revalidateRouter(router) {
-  if (typeof router.revalidate === 'function') {
-    await withHdrActive(() => router.revalidate());
+async function refreshRouteState(router) {
+  if (typeof router.revalidate !== 'function') {
     return;
   }
-  if (typeof router.navigate === 'function') {
-    await withHdrActive(() =>
-      router.navigate(getCurrentRouterPath(router), {
-        replace: true,
-        preventScrollReset: true,
-      })
-    );
-  }
-}
-
-async function refreshRouteState(router) {
-  if (typeof router.revalidate === 'function') {
-    await withHdrActive(() => router.revalidate());
-    return true;
+  try {
+    window.__reactRouterHdrActive = true;
+    await router.revalidate();
+  } finally {
+    window.__reactRouterHdrActive = false;
   }
-  return false;
 }
 
 function performReactRefresh() {
@@ -391,6 +377,34 @@ function performReactRefresh() {
   }
 }
 
+function applyManifestUpdate(nextRoutes) {
+  const router = window.__reactRouterDataRouter;
+  const routeModules = window.__reactRouterRouteModules;
+  const manifest = window.__reactRouterManifest;
+  const context = window.__reactRouterContext;
+  if (
+    !router ||
+    !routeModules ||
+    !manifest ||
+    !context ||
+    !nextRoutes ||
+    typeof router.createRoutesForHMR !== 'function' ||
+    typeof router._internalSetRoutes !== 'function'
+  ) {
+    return;
+  }
+  const routes = router.createRoutesForHMR(
+    new Set(Object.keys(nextRoutes)),
+    nextRoutes,
+    routeModules,
+    context.ssr,
+    context.isSpaMode
+  );
+  manifest.routes = nextRoutes;
+  router._internalSetRoutes(routes);
+  patchCurrentRouteMatches(router, routes);
+}
+
 async function flush() {
   const router = window.__reactRouterDataRouter;
   const routeModules = window.__reactRouterRouteModules;
@@ -402,30 +416,48 @@ async function flush() {
 
   let shouldRevalidate = pendingRevalidation;
   pendingRevalidation = false;
-  const { nextManifest, shouldRefreshRouteState, routesToRevalidate } =
+  const { nextManifest, hmrRoutes, shouldRefreshRouteState } =
     applyPendingRouteUpdates(router, routeModules, manifest, context);
-  if (nextManifest) {
+  // 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);
-  }
-  // Component-only updates do not need a full loader revalidation.
-  if (
-    shouldRefreshRouteState &&
-    (routesToRevalidate.size > 0 || shouldRevalidate)
-  ) {
-    if (await refreshRouteState(router)) {
-      shouldRevalidate = false;
+    await refreshRouteState(router);
+    shouldRevalidate = false;
+  } else if (nextManifest) {
+    if (hmrRoutes) {
+      patchCurrentRouteMatches(router, hmrRoutes);
+    }
+    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 {
+      await revalidateRouter(router);
     }
-  }
-  if (shouldRevalidate) {
-    await revalidateRouter(router);
   }
   performReactRefresh();
 }
 
 if (typeof window !== 'undefined' && import.meta.webpackHot) {
+  import.meta.webpackHot.on(
+    ${JSON.stringify(DEV_MANIFEST_UPDATE_EVENT)},
+    applyManifestUpdate
+  );
   import.meta.webpackHot.accept(
     ${JSON.stringify(hdrRevisionFilePath)},
-    scheduleReactRouterRevalidation
+    () => {
+      latestHdrRevision = __hdrRevision;
+      scheduleReactRouterRevalidation();
+    }
   );
 }
 `;

package/src/dev-runtime-artifacts.ts

@@ -5,7 +5,7 @@ import type { ServerBuild } from 'react-router';
 import type { ReactRouterManifestForDev } from './manifest.js';
 import { getCappedPluginConcurrency } from './concurrency.js';
 import { runPluginEffect, tryPluginPromise } from './effect-runtime.js';
-import { resolveServerBuildModuleEffect } from './server-build-resolution.js';
+import { resolveServerBuildModule } from './server-build-resolution.js';
 
 export type ReactRouterDevManifest = ReactRouterManifestForDev;
 
@@ -137,14 +137,17 @@ export const getEnvironmentStats = (
 const startServerBuildEvaluationEffect = (
   server: RsbuildDevServer,
   entryName: string
-): Effect.Effect<ServerBuild, Error, never> =>
+): Effect.Effect<readonly [string, ServerBuild], Error, never> =>
   tryPluginPromise(() => server.environments.node.loadBundle(entryName)).pipe(
     Effect.flatMap(buildModule =>
-      resolveServerBuildModuleEffect(
-        buildModule,
-        `Server entry ${JSON.stringify(entryName)}`
+      tryPluginPromise(() =>
+        resolveServerBuildModule(
+          buildModule,
+          `Server entry ${JSON.stringify(entryName)}`
+        )
       )
-    )
+    ),
+    Effect.map(build => [entryName, build] as const)
   );
 
 const evaluateServerBuildsEffect = (
@@ -152,12 +155,8 @@ const evaluateServerBuildsEffect = (
   entryNames: readonly string[]
 ): Effect.Effect<ReactRouterServerBuilds, Error, never> =>
   Effect.forEach(
-    entryNames.map(entryName =>
-      startServerBuildEvaluationEffect(server, entryName).pipe(
-        Effect.map(build => [entryName, build] as const)
-      )
-    ),
-    evaluation => evaluation,
+    entryNames,
+    entryName => startServerBuildEvaluationEffect(server, entryName),
     { concurrency: getCappedPluginConcurrency() }
   ).pipe(
     Effect.map(

package/src/dev-runtime-controller.ts

@@ -1,7 +1,7 @@
 import type { RsbuildConfig, RsbuildPluginAPI, Rspack } from '@rsbuild/core';
-import * as Effect from 'effect/Effect';
 import type { ServerBuild } from 'react-router';
 import { PLUGIN_NAME } from './constants.js';
+import { escapeHtml } from './plugin-utils.js';
 import {
   beginDevCompilerAttempt,
   clearDevCompilerStart,
@@ -19,6 +19,7 @@ import {
   registerReactRouterDevRuntime,
   unregisterReactRouterDevRuntime,
 } from './dev-generation.js';
+import { DEV_MANIFEST_UPDATE_EVENT } from './dev-hmr.js';
 import {
   getEnvironmentStats,
   snapshotDevChangedFiles,
@@ -27,17 +28,11 @@ import {
   type ReactRouterDevBuildPlan,
   type ReactRouterDevManifestSet,
 } from './dev-runtime-artifacts.js';
-import { DEV_HDR_REVISION_RELATIVE_PATH } from './dev-hmr.js';
 import {
   createDevRuntimeSessionManager,
   type RuntimeBinding,
 } from './dev-runtime-session.js';
-import {
-  normalizeEffectError,
-  runPluginEffect,
-  tryPluginPromise,
-  tryPluginSync,
-} from './effect-runtime.js';
+import { normalizeEffectError } from './effect-runtime.js';
 
 type ServerSetup = Exclude<
   NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
@@ -56,6 +51,11 @@ type CreateControllerOptions = {
   api: RsbuildPluginAPI;
   isBuild: boolean;
   buildPlan: ReactRouterDevBuildPlan;
+  /**
+   * The browser HMR runtime patches route manifest metadata (loader/action
+   * 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.
@@ -63,36 +63,19 @@ type CreateControllerOptions = {
   onNodeRebuildCommitted?: () => void;
 };
 
-const escapeHtml = (value: string): string =>
-  value
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;');
-
 const CSS_SOURCE_RELOAD_DELAY_MS = 1000;
 
 const isHdrRevisionFile = (file: string): boolean =>
-  file.includes(DEV_HDR_REVISION_RELATIVE_PATH);
+  file.includes('.react-router/hdr-revision.mjs');
 
 const isCssSourceFile = (file: string): boolean =>
   /\.css(?:\.[cm]?[jt]s)?$/.test(file);
 
-// A change that should bump the HDR revision: anything except the revision
-// file itself (the bump's own echo) and CSS sources (styling never changes
-// loader data).
-const hasHdrTriggeringChange = (files: Iterable<string>): boolean => {
-  for (const file of files) {
-    if (!isHdrRevisionFile(file) && !isCssSourceFile(file)) {
-      return true;
-    }
-  }
-  return false;
-};
-
 export const createReactRouterDevRuntimeController = ({
   api,
   isBuild,
   buildPlan,
+  clientPatchesRouteMetadata,
   onNodeRebuildCommitted,
 }: CreateControllerOptions): ReactRouterDevRuntimeController => {
   if (isBuild) {
@@ -165,56 +148,44 @@ export const createReactRouterDevRuntimeController = ({
     NonNullable<DevGraphIdentity['node']>
   >();
 
-  const finishRuntimeAttemptEffect = (
+  const finishRuntimeAttempt = async (
     binding: RuntimeBinding,
     pair: DevCompilerPair,
     stats: DevRuntimeStats,
     changes: Parameters<RuntimeBinding['runtime']['finishAttempt']>[1],
     identity: Parameters<RuntimeBinding['runtime']['finishAttempt']>[2]
-  ): Effect.Effect<void, Error, never> =>
-    tryPluginPromise(() =>
-      binding.runtime.finishAttempt(stats, changes, identity)
-    ).pipe(
-      Effect.flatMap(result =>
-        tryPluginSync(() => {
-          if (sessions.getActiveBinding()?.id !== binding.id) {
-            return;
-          }
-          if (result === 'retry-node') {
-            pair.node.watching?.invalidate();
-            return;
-          }
-          if (
-            result === 'committed' &&
-            changes.node.known &&
-            identity.node !== undefined &&
-            hdrSignaledNodeIdentity.get(pair) !== identity.node &&
-            hasHdrTriggeringChange(changes.node.files)
-          ) {
-            hdrSignaledNodeIdentity.set(pair, identity.node);
-            onNodeRebuildCommitted?.();
-          }
-        })
-      ),
-      Effect.catchAll(cause =>
-        tryPluginSync(() => {
-          if (sessions.getActiveBinding()?.id === binding.id) {
-            binding.runtime.failAttempt(normalizeEffectError(cause));
-          }
-        })
-      )
-    );
-
-  const finishRuntimeAttempt = (
-    binding: RuntimeBinding,
-    pair: DevCompilerPair,
-    stats: DevRuntimeStats,
-    changes: Parameters<RuntimeBinding['runtime']['finishAttempt']>[1],
-    identity: Parameters<RuntimeBinding['runtime']['finishAttempt']>[2]
-  ): Promise<void> =>
-    runPluginEffect(
-      finishRuntimeAttemptEffect(binding, pair, stats, changes, identity)
-    );
+  ): Promise<void> => {
+    try {
+      const result = await binding.runtime.finishAttempt(
+        stats,
+        changes,
+        identity
+      );
+      if (sessions.getActiveBinding()?.id !== binding.id) {
+        return;
+      }
+      if (result === 'retry-node') {
+        pair.node.watching?.invalidate();
+        return;
+      }
+      if (
+        result === 'committed' &&
+        changes.node.known &&
+        identity.node !== undefined &&
+        hdrSignaledNodeIdentity.get(pair) !== identity.node &&
+        Array.from(changes.node.files).some(
+          file => !isHdrRevisionFile(file) && !isCssSourceFile(file)
+        )
+      ) {
+        hdrSignaledNodeIdentity.set(pair, identity.node);
+        onNodeRebuildCommitted?.();
+      }
+    } catch (cause) {
+      if (sessions.getActiveBinding()?.id === binding.id) {
+        binding.runtime.failAttempt(normalizeEffectError(cause));
+      }
+    }
+  };
 
   const flushSettledAttempt = (
     binding: RuntimeBinding,
@@ -306,11 +277,22 @@ export const createReactRouterDevRuntimeController = ({
           reloadAfterCssAssetOwnershipRemoval = change === 'removed';
           sendCssAssetOwnershipReload();
         },
-        onRouteManifestChanged() {
+        onRouteManifestChanged(manifest) {
           if (sessions.getActiveBinding()?.runtime !== runtime) {
             return;
           }
-          server.sockWrite('full-reload', { path: '*' });
+          const patchesRouteMetadata =
+            typeof clientPatchesRouteMetadata === 'function'
+              ? clientPatchesRouteMetadata()
+              : clientPatchesRouteMetadata;
+          if (patchesRouteMetadata) {
+            server.sockWrite('custom', {
+              event: DEV_MANIFEST_UPDATE_EVENT,
+              data: manifest.routes,
+            });
+          } else {
+            server.sockWrite('full-reload', { path: '*' });
+          }
         },
         onWarning: message => api.logger.warn(message),
       });
@@ -566,21 +548,29 @@ export const createReactRouterDevRuntimeController = ({
     },
 
     createBuildLoader(entryName?: string): () => Promise<ServerBuild> {
-      const server = sessions.getActiveBinding()?.server;
-      if (server) {
-        return () => loadReactRouterServerBuild(server, entryName);
-      }
-      const state = sessions.getState();
-      if (state.status === 'terminal') {
-        const { error } = state;
-        return () => Promise.reject(error);
-      }
-      return () =>
-        Promise.reject(
+      // Pin the loader to the dev-server session active at creation time. Once a
+      // loader is handed to React Router for session N it must keep serving N (or
+      // fail loudly with 'not registered' once N closes) and never silently migrate
+      // to a replacement session — this preserves SSR generation/session coherency.
+      // The live fallback below applies ONLY when no session exists yet at creation
+      // (boundServer === undefined), i.e. a loader built during config setup before
+      // the dev server has started; there is no session to stay coherent with yet.
+      const boundServer = sessions.getActiveBinding()?.server;
+      return () => {
+        const server = boundServer ?? sessions.getActiveBinding()?.server;
+        if (server) {
+          return loadReactRouterServerBuild(server, entryName);
+        }
+        const state = sessions.getState();
+        if (state.status === 'terminal') {
+          return Promise.reject(state.error);
+        }
+        return Promise.reject(
           new Error(
             `[${PLUGIN_NAME}] The development server runtime is not ready.`
           )
         );
+      };
     },
   };
 };

package/src/dev-runtime-session.ts

@@ -1,13 +1,8 @@
 import type { RsbuildDevServer } from '@rsbuild/core';
-import * as Effect from 'effect/Effect';
 import { PLUGIN_NAME } from './constants.js';
 import type { ReactRouterDevRuntime } from './dev-generation.js';
 import type { DevCompilerPair } from './dev-runtime-compilation.js';
-import {
-  runPluginEffect,
-  tryPluginPromise,
-  tryPluginSync,
-} from './effect-runtime.js';
+import { normalizeEffectError } from './effect-runtime.js';
 
 export type RuntimeBinding = {
   id: number;
@@ -115,18 +110,19 @@ export const createDevRuntimeSessionManager = (
       if (observation.promise) {
         return observation.promise;
       }
-      observation.promise = runPluginEffect(
-        tryPluginPromise(close).pipe(
-          Effect.tap(() =>
-            tryPluginSync(() => applyCloseOutcome(observation, { ok: true }))
-          ),
-          Effect.catchAll(cause =>
-            tryPluginSync(() =>
-              applyCloseOutcome(observation, { ok: false, cause })
-            ).pipe(Effect.zipRight(Effect.fail(cause)))
-          )
-        )
-      );
+      let closePromise: Promise<void>;
+      try {
+        closePromise = Promise.resolve(close());
+      } catch (cause) {
+        closePromise = Promise.reject(normalizeEffectError(cause));
+      }
+      observation.promise = closePromise
+        .then(() => applyCloseOutcome(observation, { ok: true }))
+        .catch(cause => {
+          const error = normalizeEffectError(cause);
+          applyCloseOutcome(observation, { ok: false, cause: error });
+          throw error;
+        });
       return observation.promise;
     };
     closeObservationByServer.set(server, observation);

package/src/dev-server.ts

@@ -1,6 +1,7 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { RsbuildConfig } from '@rsbuild/core';
 import type { ServerBuild } from 'react-router';
+import { installDevServerSourceMapSupport } from './dev-source-maps.js';
 
 export type ServerSetup = Exclude<
   NonNullable<NonNullable<RsbuildConfig['server']>['setup']>,
@@ -83,6 +84,7 @@ export const createReactRouterDevServerSetup = ({
     // middlewares, so static assets are served before the React Router
     // request handler.
     return () => {
+      installDevServerSourceMapSupport();
       context.server.middlewares.use(createDevServerMiddleware({ loadBuild }));
     };
   };