rsbuild-plugin-react-router 0.6.5 → 0.7.0

package/README.md

@@ -343,6 +343,28 @@ If you configure `output.assetPrefix` in Rsbuild, the plugin uses that value
 for the React Router browser manifest and server build `publicPath` so asset
 URLs resolve correctly when serving from a CDN or sub-path.
 
+The web environment's own `output.assetPrefix` is passed through to the browser
+compiler untouched, so `environments.web.output.assetPrefix: 'auto'` lets the
+browser runtime resolve async chunks and stylesheets relative to the loaded
+script. The server build and browser manifest need an absolute prefix: they use
+the web environment's prefix when it is usable and otherwise fall back to the
+root `output.assetPrefix`. A common CDN setup is therefore:
+
+```ts
+export default defineConfig({
+  output: { assetPrefix: 'https://cdn.example.com/app/' }, // server-rendered URLs
+  environments: {
+    web: { output: { assetPrefix: 'auto' } }, // browser runtime resolves itself
+  },
+});
+```
+
+The plugin does not set `output.filename`, `chunkFilename`, or `publicPath`
+for the web environment. Production browser entries use Rsbuild's default
+content-hashed filenames, and `output.filename`, `output.filenameHash`,
+`output.distPath`, and `tools.rspack` output settings you configure govern
+the emitted files and the manifest URLs that reference them.
+
 ## Custom Server Setup
 
 The plugin supports two ways to handle server-side rendering:
@@ -465,6 +487,29 @@ and every configured bundle are
 evaluated and published as one generation; one failing bundle keeps the whole
 previous generation active.
 
+### Sharing `createContext()` instances with a custom server
+
+React Router middleware contexts are matched by identity, so a custom server's
+`getLoadContext` must use the same `createContext()` instance the routes import.
+With a bundled server build that instance lives inside the build. Re-export it
+from `app/entry.server.tsx` and read it from `build.entry.module`:
+
+```ts
+// app/entry.server.tsx
+export { valueContext } from './context';
+```
+
+```js
+// server.js
+getLoadContext: async () => {
+  const { valueContext } = (await build()).entry.module;
+  return new RouterContextProvider([[valueContext, 'value']]);
+},
+```
+
+This works in development through `loadReactRouterServerBuild` and in
+production through `resolveReactRouterServerBuild`.
+
 `resolveReactRouterServerBuild` accepts an imported production server module,
 normalizes ESM and CommonJS namespace shapes, resolves supported asynchronous
 build exports, and validates the result before it reaches React Router.

package/dist/511.js

@@ -375,9 +375,16 @@ function combineURLs(baseURL, relativeURL) {
 function normalizeAssetPrefix(assetPrefix) {
     return assetPrefix && 'auto' !== assetPrefix ? assetPrefix.endsWith('/') ? assetPrefix : `${assetPrefix}/` : '/';
 }
-function resolveEffectiveAssetPrefix(config) {
-    let outputPrefix = 'string' == typeof config.output?.assetPrefix ? config.output.assetPrefix : void 0;
-    return config.isBuild ? normalizeAssetPrefix(outputPrefix) : normalizeAssetPrefix(('string' == typeof config.dev?.assetPrefix ? config.dev.assetPrefix : void 0) ?? outputPrefix);
+let asString = (value)=>'string' == typeof value ? value : void 0, pickConfiguredAssetPrefix = ({ dev, output }, isBuild)=>isBuild ? asString(output?.assetPrefix) : asString(dev?.assetPrefix) ?? asString(output?.assetPrefix);
+function resolveEffectiveAssetPrefix(config, ...fallbacks) {
+    for (let candidate of [
+        config,
+        ...fallbacks
+    ]){
+        let prefix = pickConfiguredAssetPrefix(candidate, config.isBuild);
+        if (prefix && 'auto' !== prefix) return normalizeAssetPrefix(prefix);
+    }
+    return '/';
 }
 function createRouteId(file) {
     return normalize(file.replace(/\.[^/.]+$/, ''));

package/dist/environment-output.d.ts

@@ -1,6 +1,20 @@
-import type { RsbuildPluginAPI } from '@rsbuild/core';
-export declare const registerReactRouterEnvironmentOutput: ({ api, federation, resolvedServerOutput, }: {
+import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
+/**
+ * Rspack `output` policy for the web and node environments, in two tiers:
+ *
+ * 1. Overridable defaults, registered through `modifyRspackConfig`. Rsbuild
+ *    runs the user's `tools.rspack` (object or function form) after this hook,
+ *    so user output settings such as `chunkFilename` take precedence
+ *    (#129, #130). Neither `filename` nor `publicPath` is set here: Rsbuild
+ *    derives them from `output.filename`/`output.filenameHash`/`output.distPath`
+ *    and the environment's `output.assetPrefix`, which keeps `'auto'` intact.
+ * 2. Enforced invariants, registered through a `tools.rspack` function that
+ *    runs after the user's own `tools.rspack`: the server library type must
+ *    match the server module format, and federation builds need async startup.
+ */
+export declare const registerReactRouterEnvironmentOutput: ({ api, federation, resolvedServerOutput, webOutput, }: {
     api: RsbuildPluginAPI;
     federation: boolean | undefined;
     resolvedServerOutput: "commonjs" | "module";
+    webOutput: NonNullable<Rspack.Configuration["output"]>;
 }) => void;

package/dist/index.cjs

@@ -543,9 +543,16 @@ function combineURLs(baseURL, relativeURL) {
 function normalizeAssetPrefix(assetPrefix) {
     return assetPrefix && 'auto' !== assetPrefix ? assetPrefix.endsWith('/') ? assetPrefix : `${assetPrefix}/` : '/';
 }
-function resolveEffectiveAssetPrefix(config) {
-    let outputPrefix = 'string' == typeof config.output?.assetPrefix ? config.output.assetPrefix : void 0;
-    return config.isBuild ? normalizeAssetPrefix(outputPrefix) : normalizeAssetPrefix(('string' == typeof config.dev?.assetPrefix ? config.dev.assetPrefix : void 0) ?? outputPrefix);
+const asString = (value)=>'string' == typeof value ? value : void 0, pickConfiguredAssetPrefix = ({ dev, output }, isBuild)=>isBuild ? asString(output?.assetPrefix) : asString(dev?.assetPrefix) ?? asString(output?.assetPrefix);
+function resolveEffectiveAssetPrefix(config, ...fallbacks) {
+    for (let candidate of [
+        config,
+        ...fallbacks
+    ]){
+        let prefix = pickConfiguredAssetPrefix(candidate, config.isBuild);
+        if (prefix && 'auto' !== prefix) return normalizeAssetPrefix(prefix);
+    }
+    return '/';
 }
 function createRouteId(file) {
     return (0, external_pathe_namespaceObject.normalize)(file.replace(/\.[^/.]+$/, ''));
@@ -619,8 +626,27 @@ const resolveEntryWithTemplate = ({ appDirectory, entryName, templateName, templ
             asyncStartup: !0
         });
     }
-}, registerReactRouterEnvironmentOutput = ({ api, federation, resolvedServerOutput })=>{
-    api.modifyEnvironmentConfig(async (config, { name, mergeEnvironmentConfig })=>'web' !== name && 'node' !== name ? config : mergeEnvironmentConfig(config, {
+}, registerReactRouterEnvironmentOutput = ({ api, federation, resolvedServerOutput, webOutput })=>{
+    let nodeChunkLoading = 'module' === resolvedServerOutput ? 'import' : federation ? 'async-node' : 'require';
+    api.modifyRspackConfig((rspackConfig, { environment, mergeConfig })=>'web' === environment.name ? mergeConfig(rspackConfig, {
+            output: {
+                ...webOutput,
+                ...federation ? {
+                    chunkLoading: 'import'
+                } : {}
+            }
+        }) : 'node' === environment.name ? mergeConfig(rspackConfig, {
+            output: {
+                chunkFormat: resolvedServerOutput,
+                chunkLoading: nodeChunkLoading,
+                devtoolModuleFilenameTemplate: '[absolute-resource-path]',
+                devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',
+                workerChunkLoading: nodeChunkLoading,
+                wasmLoading: 'fetch',
+                module: 'module' === resolvedServerOutput,
+                chunkFilename: 'static/js/async/[name].js'
+            }
+        }) : rspackConfig), api.modifyEnvironmentConfig(async (config, { name, mergeEnvironmentConfig })=>'web' !== name && 'node' !== name ? config : mergeEnvironmentConfig(config, {
             tools: {
                 rspack: (rspackConfig)=>{
                     if (federation && ensureFederationAsyncStartup(rspackConfig), 'node' === name) {
@@ -11790,14 +11816,7 @@ const createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=
             routeModuleAnalysis
         } : {}
     };
-}, orderChunkFiles = (chunkName, files)=>{
-    let ownChunkAsset = `${chunkName}.js`, ownFileIndex = files.findIndex((file)=>file.endsWith(ownChunkAsset));
-    return ownFileIndex <= 0 ? files : [
-        files[ownFileIndex],
-        ...files.slice(0, ownFileIndex),
-        ...files.slice(ownFileIndex + 1)
-    ];
-}, collectManifestFilesByName = (items, names, getFiles)=>{
+}, isManifestJsAsset = (asset)=>/(?<!\.hot-update)\.[cm]?js(?:\?.*)?$/.test(asset), isManifestCssAsset = (asset)=>/\.css(?:\?.*)?$/.test(asset), collectManifestFilesByName = (items, names, getFiles)=>{
     let filesByName = {};
     if (!names) {
         for (let [name, item] of items)null != item && (filesByName[name] = getFiles(name, item));
@@ -11813,14 +11832,14 @@ const createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=
     return filesByName;
 }, createReactRouterManifestStats = (compilation, chunkNames)=>{
     if (!compilation) return;
-    let assetsByChunkName = collectManifestFilesByName(compilation.namedChunks, chunkNames, (chunkName, chunk)=>orderChunkFiles(chunkName, Array.from(chunk.files ?? []))), entrypointFilesByName = compilation.entrypoints ? collectManifestFilesByName(compilation.entrypoints, chunkNames, (_name, entrypoint)=>Array.from(entrypoint.getFiles?.() ?? [])) : {};
+    let assetsByChunkName = collectManifestFilesByName(compilation.namedChunks, chunkNames, (_chunkName, chunk)=>Array.from(chunk.files ?? [])), entrypointFilesByName = compilation.entrypoints ? collectManifestFilesByName(compilation.entrypoints, chunkNames, (_name, entrypoint)=>Array.from(entrypoint.getFiles?.() ?? [])) : {};
     return Object.keys(entrypointFilesByName).length > 0 ? {
         assetsByChunkName,
         entrypointFilesByName
     } : {
         assetsByChunkName
     };
-}, DEFAULT_MANIFEST_DIR = DEFAULT_JS_DIST_PATH, CSS_IMPORT_RE = /\.(?:css|less|sass|scss)(?:\?[^'"`]+)?['"`]/, createChunkAssetResolver = (clientStats, includeEntrypointJs)=>{
+}, DEFAULT_MANIFEST_DIR = 'static/js', CSS_IMPORT_RE = /\.(?:css|less|sass|scss)(?:\?[^'"`]+)?['"`]/, createChunkAssetResolver = (clientStats, includeEntrypointJs)=>{
     let chunkAssetsByName = new Map();
     return (chunkName)=>{
         let cached = chunkAssetsByName.get(chunkName);
@@ -11829,16 +11848,16 @@ const createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=
         if (!assets) {
             let result = {
                 js: [
-                    `${DEFAULT_JS_DIST_PATH}/${chunkName}.js`
+                    `${DEFAULT_MANIFEST_DIR}/${chunkName}.js`
                 ],
                 css: []
             };
             return chunkAssetsByName.set(chunkName, result), result;
         }
         let cssAssets = new Set(), jsAssets = new Set();
-        for (let asset of assets)asset.endsWith('.css') ? cssAssets.add(asset) : asset.endsWith('.js') && jsAssets.add(asset);
-        for (let asset of clientStats?.entrypointFilesByName?.[chunkName] ?? [])asset.endsWith('.css') ? cssAssets.add(asset) : includeEntrypointJs && asset.endsWith('.js') && jsAssets.add(asset);
-        0 === jsAssets.size && jsAssets.add(`${DEFAULT_JS_DIST_PATH}/${chunkName}.js`);
+        for (let asset of assets)isManifestCssAsset(asset) ? cssAssets.add(asset) : isManifestJsAsset(asset) && jsAssets.add(asset);
+        for (let asset of clientStats?.entrypointFilesByName?.[chunkName] ?? [])isManifestCssAsset(asset) ? cssAssets.add(asset) : includeEntrypointJs && isManifestJsAsset(asset) && jsAssets.add(asset);
+        if (0 === jsAssets.size) throw Error(`[react-router] Chunk "${chunkName}" emitted no JavaScript asset the browser manifest can reference (files: ${assets.join(', ') || 'none'}). Check the web \`output.filename.js\` scheme.`);
         let result = {
             js: [
                 ...jsAssets
@@ -11851,7 +11870,7 @@ const createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=
     };
 }, analyzeRouteForManifestEffect = ({ discoveredCssAssets, isBuild, routeChunkCache, routeChunkConfig, routeEntryName, routeFilePath, route, routeModuleAnalysis })=>tryPluginPromise(async ()=>{
         let { code, exports: exportNames } = await routeModuleAnalysis?.(routeFilePath, route) ?? await getRouteModuleAnalysis(routeFilePath), cssAssets = !isBuild && 0 === discoveredCssAssets.length && CSS_IMPORT_RE.test(code) ? [
-            `${DEFAULT_JS_DIST_PATH.replace('/js', '/css')}/${routeEntryName}.css`
+            `${DEFAULT_MANIFEST_DIR.replace('/js', '/css')}/${routeEntryName}.css`
         ] : discoveredCssAssets, chunkInfo = isBuild && routeChunkConfig ? await detectRouteChunksIfEnabled(routeChunkCache, routeChunkConfig, routeFilePath, code) : null;
         return {
             cssAssets,
@@ -11865,9 +11884,9 @@ const createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=
                 routeModuleExports: [],
                 hasRouteChunkByExportName: null
             })))), getManifestDirFromEntryAsset = (entryModulePath)=>{
-    if (!entryModulePath) return DEFAULT_JS_DIST_PATH;
+    if (!entryModulePath) return DEFAULT_MANIFEST_DIR;
     let dir = (0, external_pathe_namespaceObject.dirname)(entryModulePath);
-    return '.' === dir ? DEFAULT_JS_DIST_PATH : dir;
+    return '.' === dir ? DEFAULT_MANIFEST_DIR : dir;
 }, getReactRouterManifestPath = ({ version, isBuild, entryModulePath })=>{
     if (!isBuild) return 'static/js/virtual/react-router/browser-manifest.js';
     let dir = getManifestDirFromEntryAsset(entryModulePath);
@@ -12418,13 +12437,13 @@ const redirectStatusCodes = new Set([
     }), external_jsesc_namespaceObject = require("jsesc");
 var external_jsesc_default = __webpack_require__.n(external_jsesc_namespaceObject);
 const BROWSER_MANIFEST_ASSET = 'static/js/virtual/react-router/browser-manifest.js', ABSOLUTE_URL_RE = /^[a-zA-Z][a-zA-Z\d+\-.]*:/, toManifestAssetUrl = (assetPrefix, assetName)=>ABSOLUTE_URL_RE.test(assetName) || assetName.startsWith('//') || assetName.startsWith('/') ? assetName : combineURLs(assetPrefix, assetName), addIntegrity = (sri, assetPrefix, assetName, integrity)=>{
-    'string' == typeof assetName && assetName.endsWith('.js') && 'string' == typeof integrity && (sri[toManifestAssetUrl(assetPrefix, assetName)] = integrity);
+    'string' == typeof assetName && isManifestJsAsset(assetName) && 'string' == typeof integrity && (sri[toManifestAssetUrl(assetPrefix, assetName)] = integrity);
 }, computeSubresourceIntegrity = (source)=>{
     if (source) return `sha384-${(0, external_node_crypto_namespaceObject.createHash)('sha384').update(source.source()).digest('base64')}`;
 }, collectSubresourceIntegrity = (stats, compilation, assetPrefix = '/')=>{
     let sri = {};
     for (let asset of stats?.assets ?? [])addIntegrity(sri, assetPrefix, asset.name, asset.integrity);
-    if ('function' == typeof compilation?.getAssets) for (let asset of compilation.getAssets())asset.name.endsWith('.js') && addIntegrity(sri, assetPrefix, asset.name, computeSubresourceIntegrity(asset.source) ?? asset.info?.integrity);
+    if ('function' == typeof compilation?.getAssets) for (let asset of compilation.getAssets())isManifestJsAsset(asset.name) && addIntegrity(sri, assetPrefix, asset.name, computeSubresourceIntegrity(asset.source) ?? asset.info?.integrity);
     return Object.keys(sri).length > 0 ? sri : void 0;
 };
 function registerModifyBrowserManifestAssets(api, routes, pluginOptions, appDirectory, assetPrefix = '/', routeChunkOptions, options) {
@@ -12444,7 +12463,7 @@ function registerModifyBrowserManifestAssets(api, routes, pluginOptions, appDire
             compilation.updateAsset(BROWSER_MANIFEST_ASSET, new sources.RawSource(newSource));
         }
         if (isBuild) {
-            let entryAssets = stats?.assetsByChunkName?.['entry.client'], entryJsAssets = entryAssets?.filter((asset)=>asset.endsWith('.js')) || [], manifestPath = getReactRouterManifestPath({
+            let entryAssets = stats?.assetsByChunkName?.['entry.client'], entryJsAssets = entryAssets?.filter(isManifestJsAsset) || [], manifestPath = getReactRouterManifestPath({
                 version: manifest.version,
                 isBuild: !0,
                 entryModulePath: entryJsAssets[0]
@@ -14418,12 +14437,14 @@ export function EnsureClientRouteModuleForHMR___() { return ___EnsureClientRoute
 }, createServerRouteEntry = async (options)=>{
     let ast, plan = await createRscRouteExportPlan(options);
     validateRscRouteExportPlan(plan, options);
-    let lines = [], needsReactImport = !1, needsEnsureHmrImport = !1, needsStyleEntryImport = !1, streamsClientRouteCss = !plan.exportNames.some(isServerComponentExport) && plan.exportNames.includes('default') && programHasSideEffectStyleImports((ast = yuku_parse(options.code, {
+    let lines = [], needsReactImport = !1, needsEnsureHmrImport = !1, needsStyleEntryImport = !1, pushStylesheetLinks = (entryCssFilesExpression)=>{
+        lines.push(`    ...(${entryCssFilesExpression} ?? []).map(href =>`), lines.push('      React.createElement("link", { key: href, rel: "stylesheet", href: href, precedence: "default" })),');
+    }, streamsClientRouteCss = !plan.exportNames.some(isServerComponentExport) && plan.exportNames.includes('default') && programHasSideEffectStyleImports((ast = yuku_parse(options.code, {
         sourceType: 'module'
     })).program ?? ast);
     for (let exportName of plan.exportNames){
         if (streamsClientRouteCss && 'default' === exportName) {
-            needsReactImport = !0, needsStyleEntryImport = !0, lines.push(`import RscClientRouteDefault___ from ${JSON.stringify(plan.clientTargetFor('default'))};`), lines.push('export default function RscClientRouteWithStyles___(props) {'), lines.push('  return React.createElement(React.Fragment, null,'), lines.push(`    ...(${RSC_ROUTE_STYLE_ENTRY_EXPORT}.entryCssFiles ?? []).map(href =>`), lines.push('      React.createElement("link", { key: href, rel: "stylesheet", href: href, precedence: "default" })),'), lines.push('    React.createElement(RscClientRouteDefault___, props),'), lines.push('  );'), lines.push('}');
+            needsReactImport = !0, needsStyleEntryImport = !0, lines.push(`import RscClientRouteDefault___ from ${JSON.stringify(plan.clientTargetFor('default'))};`), lines.push('export default function RscClientRouteWithStyles___(props) {'), lines.push('  return React.createElement(React.Fragment, null,'), pushStylesheetLinks(`${RSC_ROUTE_STYLE_ENTRY_EXPORT}.entryCssFiles`), lines.push('    React.createElement(RscClientRouteDefault___, props),'), lines.push('  );'), lines.push('}');
             continue;
         }
         if (isClientRouteExport(exportName)) {
@@ -14431,7 +14452,7 @@ export function EnsureClientRouteModuleForHMR___() { return ___EnsureClientRoute
             continue;
         }
         if (isServerComponentExport(exportName)) {
-            needsReactImport = !0, needsEnsureHmrImport = !0, lines.push(`import { ${exportName} as ${exportName}WithoutClientChunk } from ${JSON.stringify(plan.serverTarget)};`), lines.push(`export function ${exportName}(props) {`), lines.push('  return React.createElement(React.Fragment, null,'), lines.push(`    ...(${exportName}WithoutClientChunk.entryCssFiles ?? []).map(href =>`), lines.push('      React.createElement("link", { key: href, rel: "stylesheet", href: href, precedence: "default" })),'), lines.push('    React.createElement(EnsureClientRouteModuleForHMR___, null),'), lines.push(`    React.createElement(${exportName}WithoutClientChunk, props),`), lines.push('  );'), lines.push('}');
+            needsReactImport = !0, needsEnsureHmrImport = !0, lines.push(`import { ${exportName} as ${exportName}WithoutClientChunk } from ${JSON.stringify(plan.serverTarget)};`), lines.push(`export function ${exportName}(props) {`), lines.push('  return React.createElement(React.Fragment, null,'), pushStylesheetLinks(`${exportName}WithoutClientChunk.entryCssFiles`), lines.push('    React.createElement(EnsureClientRouteModuleForHMR___, null),'), lines.push(`    React.createElement(${exportName}WithoutClientChunk, props),`), lines.push('  );'), lines.push('}');
             continue;
         }
         lines.push(createReexport(exportName, plan.serverTarget));
@@ -14689,9 +14710,14 @@ export {
     'allowed-action-origins',
     'client-version',
     'react-router-serve-config',
+    'manifest-prefix',
     "bootstrap-scripts",
     'server-manifest'
-], createReactRouterRscResolveAliases = (rootPath)=>({
+], createReactRouterRscResolveAliases = (rootPath, options = {})=>({
+        ...options.entrySsrPath ? {
+            'virtual:react-router/unstable_rsc/entry-ssr': options.entrySsrPath,
+            'virtual/react-router/unstable_rsc/entry-ssr': options.entrySsrPath
+        } : {},
         ...Object.fromEntries(RSC_VIRTUAL_ALIAS_IDS.flatMap((id)=>{
             let moduleId = `virtual/react-router/unstable_rsc/${id}`, modulePath = (0, external_pathe_namespaceObject.resolve)(rootPath, getVirtualModuleFilePath(moduleId));
             return [
@@ -14706,8 +14732,8 @@ export {
             ];
         })),
         'react-router/internal/react-server-client': (0, external_pathe_namespaceObject.resolve)(rootPath, getVirtualModuleFilePath('virtual/react-router/rsc-internal-client'))
-    }), createReactRouterRscVirtualModules = ({ allowedActionOrigins, appDirectory, basename, buildDirectory, isBuild, jsDistPath, outputClientPath, publicPath, routeDiscovery, routes, ssr })=>{
-    let rscAssetsBuildDirectory = (0, external_pathe_namespaceObject.relative)((0, external_pathe_namespaceObject.resolve)(buildDirectory, 'server'), outputClientPath), bootstrapPublicPath = normalizeAssetPrefix(publicPath);
+    }), createReactRouterRscVirtualModules = ({ allowedActionOrigins, appDirectory, basename, buildDirectory, isBuild, outputClientPath, publicPath, routeDiscovery, routes, ssr })=>{
+    let rscAssetsBuildDirectory = (0, external_pathe_namespaceObject.relative)((0, external_pathe_namespaceObject.resolve)(buildDirectory, 'server'), outputClientPath), serverPublicPath = normalizeAssetPrefix(publicPath);
     return {
         'virtual/react-router/unstable_rsc/routes': createRscRouteConfig({
             appDirectory,
@@ -14729,9 +14755,33 @@ export {
             assetsBuildDirectory: rscAssetsBuildDirectory,
             publicPath
         }),
-        "virtual/react-router/unstable_rsc/bootstrap-scripts": defaultExport([
-            combineURLs(bootstrapPublicPath, `${jsDistPath}/index.js`)
-        ]),
+        'virtual/react-router/unstable_rsc/manifest-prefix': `const manifest = __webpack_require__.rscM;
+const serverPrefix = ${JSON.stringify(serverPublicPath)};
+const appliedPrefix = manifest?.moduleLoading?.prefix;
+if (appliedPrefix && appliedPrefix !== serverPrefix) {
+  const rewrite = url =>
+    typeof url === "string" && url.startsWith(appliedPrefix)
+      ? serverPrefix + url.slice(appliedPrefix.length)
+      : url;
+  const rewriteAll = list => {
+    if (Array.isArray(list)) for (let i = 0; i < list.length; i++) list[i] = rewrite(list[i]);
+  };
+  manifest.moduleLoading.prefix = serverPrefix;
+  rewriteAll(manifest.entryJsFiles);
+  for (const files of Object.values(manifest.entryCssFiles ?? {})) rewriteAll(files);
+  for (const reference of Object.values(manifest.clientManifest ?? {})) rewriteAll(reference.cssFiles);
+}
+export const rscManifest = manifest;
+`,
+        "virtual/react-router/unstable_rsc/bootstrap-scripts": `import { rscManifest } from "virtual/react-router/unstable_rsc/manifest-prefix";
+const entryJsFiles = rscManifest?.entryJsFiles;
+if (!entryJsFiles?.length) {
+  throw new Error(
+    "[rsbuild-plugin-react-router] The rspack RSC manifest lists no browser entry script (entryJsFiles is empty), so the server cannot render bootstrap scripts. Rspack only records entry files whose name ends in \\".js\\"; web output.filename.js values with a query (for example \\"[name].js?v=[contenthash:8]\\") or another extension are not supported in RSC mode."
+  );
+}
+export default entryJsFiles;
+`,
         'virtual/react-router/unstable_rsc/server-manifest': `export default function getServerManifest() {
   return __webpack_require__.rscM?.serverManifest;
 }
@@ -15559,7 +15609,7 @@ export {
             'react-router/dom$': reactRouterDomPath
         } : {}
     };
-}, createRscModePlan = async ({ allowedActionOriginsForBuild, api, appDirectory, basename, buildDirectory, customServer, finalEntryRscClientPath, finalEntryRscPath, isBuild, outputClientPath, pluginName, prerenderConfig, routeConfig, routeDiscovery, routes, rootRouteFile, serverBuildFile, splitRouteModules, ssr })=>{
+}, createRscModePlan = async ({ allowedActionOriginsForBuild, api, appDirectory, basename, buildDirectory, customServer, finalEntryRscClientPath, finalEntryRscPath, finalEntryRscSsrPath, isBuild, outputClientPath, pluginName, prerenderConfig, routeConfig, routeDiscovery, routes, rootRouteFile, serverBuildFile, splitRouteModules, ssr })=>{
     let rscServerEntryName = (serverBuildFile || 'index.js').replace(/\.js$/, '');
     return {
         kind: 'rsc',
@@ -15587,13 +15637,12 @@ export {
                 layer: RSC_LAYERS.rsc
             }
         },
-        createVirtualModules: (publicPath, jsDistPath)=>createReactRouterRscVirtualModules({
+        createVirtualModules: (publicPath)=>createReactRouterRscVirtualModules({
                 allowedActionOrigins: allowedActionOriginsForBuild,
                 appDirectory,
                 basename,
                 buildDirectory,
                 isBuild,
-                jsDistPath,
                 outputClientPath,
                 publicPath,
                 routeDiscovery,
@@ -15605,7 +15654,9 @@ export {
                     (0, external_pathe_namespaceObject.resolve)(rootPath, 'node_modules'),
                     'node_modules'
                 ],
-                alias: createReactRouterRscResolveAliases(rootPath)
+                alias: createReactRouterRscResolveAliases(rootPath, {
+                    entrySsrPath: finalEntryRscSsrPath
+                })
             }),
         server: customServer ? void 0 : {
             setup: createReactRouterRscDevServerSetup({
@@ -15685,7 +15736,7 @@ export {
             defaultEntryName,
             serverBundleEntries: artifacts.serverBundleEntries
         }),
-        createVirtualModules: (publicPath, _jsDistPath)=>createClassicVirtualModules({
+        createVirtualModules: (publicPath)=>createClassicVirtualModules({
                 allowedActionOrigins: allowedActionOriginsForBuild,
                 appDirectory,
                 assetsBuildDirectory,
@@ -15720,10 +15771,7 @@ export {
             library: {
                 type: 'module'
             },
-            module: !0,
-            ...isBuild ? {
-                chunkFilename: 'static/js/async/[id]-[contenthash:16].js'
-            } : {}
+            module: !0
         },
         webOptimization: {
             avoidEntryIife: !0,
@@ -15805,11 +15853,14 @@ export {
             }), api.onBeforeBuild(()=>{
                 warnOnClientSourceMaps(api.getNormalizedConfig(), (msg)=>api.logger.warn(msg), 'web');
             }), api.onBeforeCreateCompiler(()=>{
-                let normalized = api.getNormalizedConfig();
+                let root = api.getNormalizedConfig(), web = root.environments.web;
                 assetPrefix = resolveEffectiveAssetPrefix({
-                    dev: normalized.dev,
-                    output: normalized.output,
+                    dev: web?.dev,
+                    output: web?.output,
                     isBuild: 'build' === api.context.action
+                }, {
+                    dev: root.dev,
+                    output: root.output
                 });
             });
             let configPath = findEntryFile((0, external_pathe_namespaceObject.resolve)('react-router.config')), configExists = (0, external_node_fs_namespaceObject.existsSync)(configPath), configWatchPaths = configExists ? configPath : JS_EXTENSIONS.map((extension)=>(0, external_pathe_namespaceObject.resolve)(`react-router.config${extension}`)), reactRouterUserConfig = {};
@@ -15964,6 +16015,7 @@ export {
                 buildDirectory,
                 finalEntryRscClientPath,
                 finalEntryRscPath,
+                finalEntryRscSsrPath,
                 outputClientPath,
                 pluginName: PLUGIN_NAME,
                 serverBuildFile
@@ -16076,13 +16128,16 @@ export {
                         prerenderPaths: modePlan.prerenderPaths,
                         basename
                     })))), api.modifyRsbuildConfig(async (config, { mergeRsbuildConfig })=>{
-                let webDistPath = config.environments?.web?.output?.distPath, rootDistPath = config.output?.distPath, jsDistPath = ('object' == typeof webDistPath ? webDistPath.js : void 0) ?? ('object' == typeof rootDistPath ? rootDistPath.js : void 0) ?? DEFAULT_JS_DIST_PATH, assetPrefix = resolveEffectiveAssetPrefix({
-                    dev: config.dev,
-                    output: config.output,
+                let publicPath, webConfig = config.environments?.web, webJsFilename = webConfig?.output?.filename?.js ?? config.output?.filename?.js;
+                if (isRscMode && 'string' == typeof webJsFilename && !/\.js$/.test(webJsFilename)) throw Error(`[${PLUGIN_NAME}] RSC mode requires web \`output.filename.js\` to end in ".js" (got ${JSON.stringify(webJsFilename)}): rspack's RSC manifest omits entry files with a query or another extension, so the server could not render bootstrap scripts.`);
+                let vmodPlugin = (publicPath = resolveEffectiveAssetPrefix({
+                    dev: webConfig?.dev,
+                    output: webConfig?.output,
                     isBuild
-                }), vmodPlugin = new core_namespaceObject.rspack.experiments.VirtualModulesPlugin(mapVirtualModules(modePlan.createVirtualModules(assetPrefix, jsDistPath))), useAsyncNodeChunkLoading = options.federation && 'commonjs' === resolvedServerOutput, nodeChunkLoading = 'require';
-                'module' === resolvedServerOutput ? nodeChunkLoading = 'import' : useAsyncNodeChunkLoading && (nodeChunkLoading = 'async-node');
-                let guardedLazyCompilation = guardReactRouterLazyCompilation({
+                }, {
+                    dev: config.dev,
+                    output: config.output
+                }), new core_namespaceObject.rspack.experiments.VirtualModulesPlugin(mapVirtualModules(modePlan.createVirtualModules(publicPath)))), guardedLazyCompilation = guardReactRouterLazyCompilation({
                     lazyCompilation: Object.prototype.hasOwnProperty.call(options, 'lazyCompilation') ? pluginOptions.lazyCompilation : config.dev?.lazyCompilation ?? pluginOptions.lazyCompilation,
                     entryClientPath: isRscMode ? finalEntryRscClientPath : finalEntryClientPath,
                     prewarmReactRouterModules: !!pluginOptions.unstableLazyCompilationPrewarm
@@ -16136,9 +16191,6 @@ export {
                                 }
                             },
                             output: {
-                                filename: {
-                                    js: '[name].js'
-                                },
                                 distPath: {
                                     root: outputClientPath
                                 }
@@ -16157,13 +16209,6 @@ export {
                                         ]
                                     },
                                     externalsType: modePlan.webExternalsType,
-                                    output: {
-                                        ...modePlan.webOutput,
-                                        publicPath: assetPrefix,
-                                        ...options.federation ? {
-                                            chunkLoading: 'import'
-                                        } : {}
-                                    },
                                     optimization: modePlan.webOptimization
                                 }
                             }
@@ -16201,17 +16246,7 @@ export {
                                     },
                                     externals: modePlan.nodeExternals,
                                     ...modePlan.nodeDependencies,
-                                    externalsType: resolvedServerOutput,
-                                    output: {
-                                        chunkFormat: resolvedServerOutput,
-                                        chunkLoading: nodeChunkLoading,
-                                        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
-                                        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',
-                                        workerChunkLoading: nodeChunkLoading,
-                                        wasmLoading: 'fetch',
-                                        module: 'module' === resolvedServerOutput,
-                                        chunkFilename: 'static/js/async/[name].js'
-                                    }
+                                    externalsType: resolvedServerOutput
                                 }
                             }
                         }
@@ -16220,7 +16255,8 @@ export {
             }), registerReactRouterEnvironmentOutput({
                 api,
                 federation: pluginOptions.federation,
-                resolvedServerOutput
+                resolvedServerOutput,
+                webOutput: modePlan.webOutput
             }), 'classic' === modePlan.kind && useRouteModuleTransformLoader && api.modifyEnvironmentConfig(async (config, { name, mergeEnvironmentConfig })=>'web' !== name && 'node' !== name ? config : mergeEnvironmentConfig(config, {
                     tools: {
                         rspack: (rspackConfig)=>{