rsbuild-plugin-react-router 0.6.6 → 0.7.0

package/dist/index.js

@@ -7356,7 +7356,7 @@ let createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=>{
             routeModuleAnalysis
         } : {}
     };
-}, 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));
@@ -7372,15 +7372,7 @@ let createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=>{
     return filesByName;
 }, createReactRouterManifestStats = (compilation, chunkNames)=>{
     if (!compilation) return;
-    let assetsByChunkName = collectManifestFilesByName(compilation.namedChunks, chunkNames, (chunkName, chunk)=>{
-        var files;
-        let ownChunkAsset, ownFileIndex;
-        return files = Array.from(chunk.files ?? []), ownChunkAsset = `${chunkName}.js`, (ownFileIndex = files.findIndex((file)=>file.endsWith(ownChunkAsset))) <= 0 ? files : [
-            files[ownFileIndex],
-            ...files.slice(0, ownFileIndex),
-            ...files.slice(ownFileIndex + 1)
-        ];
-    }), 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
@@ -7416,9 +7408,9 @@ async function generateReactRouterManifestForDev(routes, _options, clientStats,
                 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) : isBuild && 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) : isBuild && 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
@@ -7906,7 +7898,7 @@ let redirectStatusCodes = new Set([
         }
     };
 }, BROWSER_MANIFEST_ASSET = 'static/js/virtual/react-router/browser-manifest.js', ABSOLUTE_URL_RE = /^[a-zA-Z][a-zA-Z\d+\-.]*:/, addIntegrity = (sri, assetPrefix, assetName, integrity)=>{
-    'string' == typeof assetName && assetName.endsWith('.js') && 'string' == typeof integrity && (sri[ABSOLUTE_URL_RE.test(assetName) || assetName.startsWith('//') || assetName.startsWith('/') ? assetName : combineURLs(assetPrefix, assetName)] = integrity);
+    'string' == typeof assetName && isManifestJsAsset(assetName) && 'string' == typeof integrity && (sri[ABSOLUTE_URL_RE.test(assetName) || assetName.startsWith('//') || assetName.startsWith('/') ? assetName : combineURLs(assetPrefix, assetName)] = integrity);
 }, computeSubresourceIntegrity = (source)=>{
     if (source) return `sha384-${createHash('sha384').update(source.source()).digest('base64')}`;
 };
@@ -8596,12 +8588,14 @@ export function EnsureClientRouteModuleForHMR___() { return ___EnsureClientRoute
 }, createServerRouteEntry = async (options)=>{
     let 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(getProgram(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(getProgram(yuku_parse(options.code, {
         sourceType: 'module'
     })));
     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)) {
@@ -8609,7 +8603,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));
@@ -8803,6 +8797,7 @@ export function EnsureClientRouteModuleForHMR___() { return ___EnsureClientRoute
     'allowed-action-origins',
     'client-version',
     'react-router-serve-config',
+    'manifest-prefix',
     "bootstrap-scripts",
     'server-manifest'
 ], setupReactRouterRscPlugin = async ({ api, entryRscPath, entrySsrPath, pluginName, rsc })=>{
@@ -9528,8 +9523,8 @@ export function EnsureClientRouteModuleForHMR___() { return ___EnsureClientRoute
                 layer: RSC_LAYERS.rsc
             }
         },
-        createVirtualModules: (publicPath, jsDistPath)=>(({ allowedActionOrigins, appDirectory, basename, buildDirectory, isBuild, jsDistPath, outputClientPath, publicPath, routeDiscovery, routes, ssr })=>{
-                let rscAssetsBuildDirectory = relative(external_pathe_resolve(buildDirectory, 'server'), outputClientPath), bootstrapPublicPath = normalizeAssetPrefix(publicPath);
+        createVirtualModules: (publicPath)=>(({ allowedActionOrigins, appDirectory, basename, buildDirectory, isBuild, outputClientPath, publicPath, routeDiscovery, routes, ssr })=>{
+                let rscAssetsBuildDirectory = relative(external_pathe_resolve(buildDirectory, 'server'), outputClientPath), serverPublicPath = normalizeAssetPrefix(publicPath);
                 return {
                     'virtual/react-router/unstable_rsc/routes': (({ appDirectory, routes })=>{
                         let componentResolutionCode = RSC_ROUTE_COMPONENT_EXPORTS.map(({ routeProperty, clientExport, serverExport })=>{
@@ -9625,9 +9620,33 @@ export default [`;
                         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;
 }
@@ -9667,7 +9686,6 @@ export {
                 basename,
                 buildDirectory,
                 isBuild,
-                jsDistPath,
                 outputClientPath,
                 publicPath,
                 routeDiscovery,
@@ -9849,7 +9867,7 @@ export {
             defaultEntryName,
             serverBundleEntries: artifacts.serverBundleEntries
         }),
-        createVirtualModules: (publicPath, _jsDistPath)=>(({ allowedActionOrigins, appDirectory, assetsBuildDirectory, basename, devHmrRuntimeModule, entryServerPath, future, isSpaMode, prerenderPaths, publicPath, routeDiscovery, routes, routesByServerBundleId, ssr })=>{
+        createVirtualModules: (publicPath)=>(({ allowedActionOrigins, appDirectory, assetsBuildDirectory, basename, devHmrRuntimeModule, entryServerPath, future, isSpaMode, prerenderPaths, publicPath, routeDiscovery, routes, routesByServerBundleId, ssr })=>{
                 let serverBuildOptions = {
                     entryServerPath,
                     assetsBuildDirectory,
@@ -9938,10 +9956,7 @@ export {
             library: {
                 type: 'module'
             },
-            module: !0,
-            ...isBuild ? {
-                chunkFilename: 'static/js/async/[id]-[contenthash:16].js'
-            } : {}
+            module: !0
         },
         webOptimization: {
             avoidEntryIife: !0,
@@ -10105,11 +10120,14 @@ export {
                     (isSourceMapEnabled(sourceMapSetting) || !0 === devtoolSetting || ('string' == typeof devtoolSetting ? devtoolSetting.includes('source-map') : null !== devtoolSetting && 'object' == typeof devtoolSetting)) && warn("\n  WARNING: Source maps are enabled in production\n  This makes your server code publicly visible in the browser.\n  This is highly discouraged! If you insist, ensure that you are using\n  environment variables for secrets and not hard-coding them in your source code.\n");
                 }(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(external_pathe_resolve('react-router.config')), configExists = existsSync(configPath), configWatchPaths = configExists ? configPath : JS_EXTENSIONS.map((extension)=>external_pathe_resolve(`react-router.config${extension}`)), reactRouterUserConfig1 = {};
@@ -10934,16 +10952,19 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                         basename
                     })))), api.modifyRsbuildConfig(async (config, { mergeRsbuildConfig })=>{
                 var existing;
-                let publicPath, jsDistPath, webDistPath = config.environments?.web?.output?.distPath, rootDistPath = config.output?.distPath, jsDistPath1 = ('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 = (publicPath = assetPrefix, jsDistPath = jsDistPath1, new rspack.experiments.VirtualModulesPlugin(Object.fromEntries(Object.entries(modePlan.createVirtualModules(publicPath, jsDistPath)).map(([moduleId, contents])=>[
+                }, {
+                    dev: config.dev,
+                    output: config.output
+                }), new rspack.experiments.VirtualModulesPlugin(Object.fromEntries(Object.entries(modePlan.createVirtualModules(publicPath)).map(([moduleId, contents])=>[
                         getVirtualModuleFilePath(moduleId),
                         contents
-                    ])))), useAsyncNodeChunkLoading = options.federation && 'commonjs' === resolvedServerOutput, nodeChunkLoading = 'require';
-                'module' === resolvedServerOutput ? nodeChunkLoading = 'import' : useAsyncNodeChunkLoading && (nodeChunkLoading = 'async-node');
-                let guardedLazyCompilation = (({ lazyCompilation, entryClientPath, prewarmReactRouterModules = !1 })=>{
+                    ])))), guardedLazyCompilation = (({ lazyCompilation, entryClientPath, prewarmReactRouterModules = !1 })=>{
                     if (void 0 === lazyCompilation || !1 === lazyCompilation) return lazyCompilation;
                     let options = !0 === lazyCompilation ? {
                         entries: !0,
@@ -11035,9 +11056,6 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                                 }
                             },
                             output: {
-                                filename: {
-                                    js: '[name].js'
-                                },
                                 distPath: {
                                     root: outputClientPath
                                 }
@@ -11056,13 +11074,6 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                                         ]
                                     },
                                     externalsType: modePlan.webExternalsType,
-                                    output: {
-                                        ...modePlan.webOutput,
-                                        publicPath: assetPrefix,
-                                        ...options.federation ? {
-                                            chunkLoading: 'import'
-                                        } : {}
-                                    },
                                     optimization: modePlan.webOptimization
                                 }
                             }
@@ -11100,24 +11111,33 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                                     },
                                     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
                                 }
                             }
                         }
                     }
                 });
-            }), (({ api, federation, resolvedServerOutput })=>{
-                api.modifyEnvironmentConfig(async (config, { name, mergeEnvironmentConfig })=>'web' !== name && 'node' !== name ? config : mergeEnvironmentConfig(config, {
+            }), (({ 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 && ((rspackConfig)=>{
@@ -11149,7 +11169,8 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
             })({
                 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)=>{
@@ -11286,7 +11307,7 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                         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]
@@ -11298,7 +11319,7 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                     let sri = withSri ? ((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;
                     })(compilation.getStats().toJson({
                         all: !1,

package/dist/manifest.d.ts

@@ -64,6 +64,8 @@ type ReactRouterManifestStatsCompilation = {
     namedChunks: ReactRouterManifestStatsLookup<ReactRouterManifestStatsChunk>;
     entrypoints?: ReactRouterManifestStatsLookup<ReactRouterManifestStatsEntrypoint>;
 };
+export declare const isManifestJsAsset: (asset: string) => boolean;
+export declare const isManifestCssAsset: (asset: string) => boolean;
 export declare const createReactRouterManifestStats: (compilation: ReactRouterManifestStatsCompilation | undefined, chunkNames?: ReadonlySet<string>) => ReactRouterManifestStats | undefined;
 export type RouteManifestModuleExports = Record<string, readonly string[]>;
 export type ReactRouterManifestGenerationResult = {

package/dist/mode-plan.d.ts

@@ -10,7 +10,7 @@ type CommonModePlan = {
     manifestChunkNames: Set<string>;
     webEntries: Record<string, string | RsbuildEntryDescription>;
     nodeEntries: Record<string, string | RsbuildEntryDescription>;
-    createVirtualModules(publicPath: string, jsDistPath: string): Record<string, string>;
+    createVirtualModules(publicPath: string): Record<string, string>;
     createResolveConfig(rootPath: string): Rspack.Configuration['resolve'];
     server: RsbuildConfig['server'] | undefined;
     webExternalsType: 'module' | undefined;

package/dist/plugin-utils.d.ts

@@ -7,26 +7,32 @@ export declare const getPackageVersion: (packageName: string, resolvePackagePath
 export declare const escapeHtml: (value: string) => string;
 export declare function combineURLs(baseURL: string, relativeURL: string): string;
 export declare function normalizeAssetPrefix(assetPrefix?: string): string;
-/**
- * Resolve the asset prefix Rsbuild applies to emitted asset URLs for the given
- * mode. In development the effective prefix is `dev.assetPrefix` (which Rsbuild
- * defaults from `server.base`, falling back to `output.assetPrefix`); in a
- * production build it is `output.assetPrefix`. Both fields are already resolved
- * on the normalized config, so this mirrors Rsbuild's own precedence rather than
- * re-deriving it from `server.base`.
- *
- * `dev.assetPrefix` may be a boolean on the raw config (`false` disables it);
- * boolean/`'auto'`/empty values normalize to the root prefix `'/'`.
- */
-export declare function resolveEffectiveAssetPrefix(config: {
+type AssetPrefixConfig = {
     dev?: {
         assetPrefix?: unknown;
     };
     output?: {
         assetPrefix?: unknown;
     };
+};
+/**
+ * Resolve the absolute asset prefix the server build and browser manifest use
+ * for asset URLs. In development the effective prefix is `dev.assetPrefix`
+ * (which Rsbuild defaults from `server.base`, falling back to
+ * `output.assetPrefix`); in a production build it is `output.assetPrefix`.
+ *
+ * `fallbacks` are consulted in order (e.g. the root config after the web
+ * environment) when the preceding config only offers a prefix the server
+ * cannot use: `'auto'` and empty values are browser-runtime-only, so a root
+ * CDN prefix must survive a web `'auto'`. The choice happens before
+ * normalization so that `'auto'` is not first folded into `'/'`.
+ *
+ * `dev.assetPrefix` may be a boolean on the raw config (`false` disables it);
+ * boolean/`'auto'`/empty values ultimately normalize to the root prefix `'/'`.
+ */
+export declare function resolveEffectiveAssetPrefix(config: AssetPrefixConfig & {
     isBuild: boolean;
-}): string;
+}, ...fallbacks: AssetPrefixConfig[]): string;
 export declare function createRouteId(file: string): string;
 export declare function findEntryFile(basePath: string): string;
 export declare function generateWithProps(): string;

package/dist/rsc-virtual-modules.d.ts

@@ -6,8 +6,6 @@ type RscVirtualModulesOptions = {
     basename: string;
     buildDirectory: string;
     isBuild: boolean;
-    /** Resolved web `output.distPath.js` segment, e.g. `static/js`. */
-    jsDistPath: string;
     outputClientPath: string;
     publicPath: string;
     routeDiscovery: Config['routeDiscovery'];
@@ -17,5 +15,5 @@ type RscVirtualModulesOptions = {
 export declare const createReactRouterRscResolveAliases: (rootPath: string, options?: {
     entrySsrPath?: string;
 }) => Record<string, string>;
-export declare const createReactRouterRscVirtualModules: ({ allowedActionOrigins, appDirectory, basename, buildDirectory, isBuild, jsDistPath, outputClientPath, publicPath, routeDiscovery, routes, ssr, }: RscVirtualModulesOptions) => Record<string, string>;
+export declare const createReactRouterRscVirtualModules: ({ allowedActionOrigins, appDirectory, basename, buildDirectory, isBuild, outputClientPath, publicPath, routeDiscovery, routes, ssr, }: RscVirtualModulesOptions) => Record<string, string>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsbuild-plugin-react-router",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "React Router plugin for Rsbuild",
   "repository": {
     "type": "git",

package/src/environment-output.ts

@@ -1,15 +1,64 @@
-import type { RsbuildPluginAPI } from '@rsbuild/core';
+import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
 import { ensureFederationAsyncStartup } from './federation.js';
 
+/**
+ * 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 const registerReactRouterEnvironmentOutput = ({
   api,
   federation,
   resolvedServerOutput,
+  webOutput,
 }: {
   api: RsbuildPluginAPI;
   federation: boolean | undefined;
   resolvedServerOutput: 'commonjs' | 'module';
+  webOutput: NonNullable<Rspack.Configuration['output']>;
 }): void => {
+  const nodeChunkLoading =
+    resolvedServerOutput === 'module'
+      ? 'import'
+      : federation
+        ? 'async-node'
+        : 'require';
+
+  api.modifyRspackConfig((rspackConfig, { environment, mergeConfig }) => {
+    if (environment.name === 'web') {
+      return mergeConfig(rspackConfig, {
+        output: {
+          ...webOutput,
+          ...(federation ? { chunkLoading: 'import' } : {}),
+        },
+      });
+    }
+    if (environment.name === 'node') {
+      return mergeConfig(rspackConfig, {
+        output: {
+          chunkFormat: resolvedServerOutput,
+          chunkLoading: nodeChunkLoading,
+          devtoolModuleFilenameTemplate: '[absolute-resource-path]',
+          devtoolFallbackModuleFilenameTemplate:
+            '[absolute-resource-path]?[hash]',
+          workerChunkLoading: nodeChunkLoading,
+          wasmLoading: 'fetch',
+          module: resolvedServerOutput === 'module',
+          chunkFilename: 'static/js/async/[name].js',
+        },
+      });
+    }
+    return rspackConfig;
+  });
+
   api.modifyEnvironmentConfig(
     async (config, { name, mergeEnvironmentConfig }) => {
       if (name !== 'web' && name !== 'node') {

package/src/index.ts

@@ -6,11 +6,7 @@ import { rspack, type RsbuildPlugin, type Rspack } from '@rsbuild/core';
 import { relative, resolve } from 'pathe';
 
 import { getDefaultConcurrency } from './concurrency.js';
-import {
-  DEFAULT_JS_DIST_PATH,
-  JS_EXTENSIONS,
-  PLUGIN_NAME,
-} from './constants.js';
+import { JS_EXTENSIONS, PLUGIN_NAME } from './constants.js';
 import { guardReactRouterLazyCompilation } from './lazy-compilation.js';
 import {
   findEntryFile,
@@ -222,13 +218,25 @@ export const pluginReactRouter = (
       warnOnClientSourceMaps(normalized, msg => api.logger.warn(msg), 'web');
     });
 
+    // The manifest / server `publicPath` follows the web environment's asset
+    // prefix because that is where the browser assets are served from. A web
+    // prefix the server cannot use (`'auto'`) falls back to the root prefix,
+    // so `output.assetPrefix: 'https://cdn/'` + web `'auto'` still emits CDN
+    // URLs from the server.
     api.onBeforeCreateCompiler(() => {
-      const normalized = api.getNormalizedConfig();
-      assetPrefix = resolveEffectiveAssetPrefix({
-        dev: normalized.dev,
-        output: normalized.output,
-        isBuild: api.context.action === 'build',
-      });
+      const root = api.getNormalizedConfig();
+      // `getNormalizedConfig({ environment: 'web' })` throws when the build was
+      // narrowed to other environments (`--environment node`), so look the web
+      // environment up on the root config instead.
+      const web = root.environments.web;
+      assetPrefix = resolveEffectiveAssetPrefix(
+        {
+          dev: web?.dev,
+          output: web?.output,
+          isBuild: api.context.action === 'build',
+        },
+        { dev: root.dev, output: root.output }
+      );
     });
 
     const configPath = findEntryFile(resolve('react-router.config'));
@@ -832,39 +840,35 @@ export const pluginReactRouter = (
     }
 
     // Public requests stay bare while Rspack resolves seeded virtual files.
-    const createVirtualModulePlugin = (
-      publicPath: string,
-      jsDistPath: string
-    ) => {
+    const createVirtualModulePlugin = (publicPath: string) => {
       return new rspack.experiments.VirtualModulesPlugin(
-        mapVirtualModules(modePlan.createVirtualModules(publicPath, jsDistPath))
+        mapVirtualModules(modePlan.createVirtualModules(publicPath))
       );
     };
 
     api.modifyRsbuildConfig(async (config, { mergeRsbuildConfig }) => {
-      // The RSC bootstrap script URL must reflect the user's web js distPath;
-      // the entry filename itself is deterministic because the plugin forces
-      // web `output.filename.js` to '[name].js' below.
-      const webDistPath = config.environments?.web?.output?.distPath;
-      const rootDistPath = config.output?.distPath;
-      const jsDistPath =
-        (typeof webDistPath === 'object' ? webDistPath.js : undefined) ??
-        (typeof rootDistPath === 'object' ? rootDistPath.js : undefined) ??
-        DEFAULT_JS_DIST_PATH;
-      const assetPrefix = resolveEffectiveAssetPrefix({
-        dev: config.dev,
-        output: config.output,
-        isBuild,
-      });
-      const vmodPlugin = createVirtualModulePlugin(assetPrefix, jsDistPath);
-      const useAsyncNodeChunkLoading =
-        options.federation && resolvedServerOutput === 'commonjs';
-      let nodeChunkLoading: 'import' | 'async-node' | 'require' = 'require';
-      if (resolvedServerOutput === 'module') {
-        nodeChunkLoading = 'import';
-      } else if (useAsyncNodeChunkLoading) {
-        nodeChunkLoading = 'async-node';
+      const webConfig = config.environments?.web;
+      const webJsFilename =
+        webConfig?.output?.filename?.js ?? config.output?.filename?.js;
+      // Rspack's RSC manifest only records browser entry files named `*.js`
+      // (`entryJsFiles`), and the server renders its bootstrap scripts from
+      // that list. Reject filename schemes it would silently drop up front.
+      if (
+        isRscMode &&
+        typeof webJsFilename === 'string' &&
+        !/\.js$/.test(webJsFilename)
+      ) {
+        throw new 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.`
+        );
       }
+      const assetPrefix = resolveEffectiveAssetPrefix(
+        { dev: webConfig?.dev, output: webConfig?.output, isBuild },
+        { dev: config.dev, output: config.output }
+      );
+      const vmodPlugin = createVirtualModulePlugin(assetPrefix);
       const configuredLazyCompilation = Object.prototype.hasOwnProperty.call(
         options,
         'lazyCompilation'
@@ -964,9 +968,6 @@ export const pluginReactRouter = (
                   }),
             },
             output: {
-              filename: {
-                js: '[name].js',
-              },
               distPath: {
                 root: outputClientPath,
               },
@@ -985,15 +986,6 @@ export const pluginReactRouter = (
                   ],
                 },
                 externalsType: modePlan.webExternalsType,
-                output: {
-                  ...modePlan.webOutput,
-                  publicPath: assetPrefix,
-                  ...(options.federation
-                    ? {
-                        chunkLoading: 'import',
-                      }
-                    : {}),
-                },
                 optimization: modePlan.webOptimization,
               },
             },
@@ -1038,17 +1030,6 @@ export const pluginReactRouter = (
                 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: resolvedServerOutput === 'module',
-                  chunkFilename: 'static/js/async/[name].js',
-                },
               },
             },
           },
@@ -1060,6 +1041,7 @@ export const pluginReactRouter = (
       api,
       federation: pluginOptions.federation,
       resolvedServerOutput,
+      webOutput: modePlan.webOutput,
     });
 
     if (modePlan.kind === 'classic' && useRouteModuleTransformLoader) {