rsbuild-plugin-react-router 0.6.6 → 0.7.0

package/src/manifest.ts

@@ -167,19 +167,17 @@ type ReactRouterManifestStatsCompilation = {
   entrypoints?: ReactRouterManifestStatsLookup<ReactRouterManifestStatsEntrypoint>;
 };
 
-const orderChunkFiles = (chunkName: string, files: string[]): string[] => {
-  const ownChunkAsset = `${chunkName}.js`;
-  const ownFileIndex = files.findIndex(file => file.endsWith(ownChunkAsset));
-  if (ownFileIndex <= 0) {
-    return files;
-  }
-
-  return [
-    files[ownFileIndex],
-    ...files.slice(0, ownFileIndex),
-    ...files.slice(ownFileIndex + 1),
-  ];
-};
+// Emitted asset names may carry a query (`output.filename.js:
+// '[name].js?v=[contenthash:8]'`); classify on the pathname but keep the full
+// reference, since the query is part of the URL the browser must request.
+// A chunk's own script is whatever JavaScript the compilation rendered for it,
+// regardless of `output.filename` scheme. In development, HMR update files are
+// also recorded on `chunk.files`; they are never the module to load.
+export const isManifestJsAsset = (asset: string): boolean =>
+  /(?<!\.hot-update)\.[cm]?js(?:\?.*)?$/.test(asset);
+
+export const isManifestCssAsset = (asset: string): boolean =>
+  /\.css(?:\?.*)?$/.test(asset);
 
 const collectManifestFilesByName = <T>(
   items: ReactRouterManifestStatsLookup<T>,
@@ -241,8 +239,7 @@ export const createReactRouterManifestStats = (
   const assetsByChunkName = collectManifestFilesByName(
     compilation.namedChunks,
     chunkNames,
-    (chunkName, chunk) =>
-      orderChunkFiles(chunkName, Array.from(chunk.files ?? []))
+    (_chunkName, chunk) => Array.from(chunk.files ?? [])
   );
   const entrypointFilesByName = compilation.entrypoints
     ? collectManifestFilesByName(
@@ -303,22 +300,31 @@ const createChunkAssetResolver = (
 
     const cssAssets = new Set<string>();
     const jsAssets = new Set<string>();
+    // The chunk's own files come first so `js[0]` is the route module itself;
+    // entrypoint files (runtime, shared vendor chunks) follow as `imports`.
     for (const asset of assets) {
-      if (asset.endsWith('.css')) {
+      if (isManifestCssAsset(asset)) {
         cssAssets.add(asset);
-      } else if (asset.endsWith('.js')) {
+      } else if (isManifestJsAsset(asset)) {
         jsAssets.add(asset);
       }
     }
     for (const asset of clientStats?.entrypointFilesByName?.[chunkName] ?? []) {
-      if (asset.endsWith('.css')) {
+      if (isManifestCssAsset(asset)) {
         cssAssets.add(asset);
-      } else if (includeEntrypointJs && asset.endsWith('.js')) {
+      } else if (includeEntrypointJs && isManifestJsAsset(asset)) {
         jsAssets.add(asset);
       }
     }
     if (jsAssets.size === 0) {
-      jsAssets.add(`${DEFAULT_MANIFEST_DIR}/${chunkName}.js`);
+      // Compilation metadata exists for this chunk but names no module script.
+      // Guessing `<dir>/<chunk>.js` here would turn an identifiable build
+      // problem into a browser 404, so surface it at build time instead.
+      throw new 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.`
+      );
     }
 
     const result = { js: [...jsAssets], css: [...cssAssets] };

package/src/mode-plan.ts

@@ -36,10 +36,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;
@@ -183,14 +180,13 @@ const createRscModePlan = async ({
         layer: RSC_LAYERS.rsc,
       },
     },
-    createVirtualModules: (publicPath: string, jsDistPath: string) =>
+    createVirtualModules: (publicPath: string) =>
       createReactRouterRscVirtualModules({
         allowedActionOrigins: allowedActionOriginsForBuild,
         appDirectory,
         basename,
         buildDirectory,
         isBuild,
-        jsDistPath,
         outputClientPath,
         publicPath,
         routeDiscovery,
@@ -314,7 +310,7 @@ const createClassicModePlan = async ({
       defaultEntryName,
       serverBundleEntries: artifacts.serverBundleEntries,
     }),
-    createVirtualModules: (publicPath: string, _jsDistPath: string) =>
+    createVirtualModules: (publicPath: string) =>
       createClassicVirtualModules({
         allowedActionOrigins: allowedActionOriginsForBuild,
         appDirectory,
@@ -349,11 +345,9 @@ const createClassicModePlan = async ({
       wasmLoading: 'fetch',
       library: { type: 'module' },
       module: true,
-      // Async chunks are addressed by id at runtime, so the chunk name only
-      // adds bytes to the filename and to every place that references it.
-      ...(isBuild
-        ? { chunkFilename: 'static/js/async/[id]-[contenthash:16].js' }
-        : {}),
+      // Async chunk filenames are left to Rsbuild, which derives them from
+      // `output.filename.js`, `output.filenameHash`, and `distPath.jsAsync`,
+      // so user configuration governs every JavaScript filename (#129).
     },
     webOptimization: {
       avoidEntryIife: true,

package/src/modify-browser-manifest.ts

@@ -7,6 +7,7 @@ import {
   generateReactRouterManifestForDev,
   getReactRouterManifestChunkNames,
   getReactRouterManifestPath,
+  isManifestJsAsset,
   type ReactRouterManifestForDev as ReactRouterManifest,
   type RouteChunkManifestOptions,
   type RouteManifestModuleExports,
@@ -83,7 +84,7 @@ const addIntegrity = (
 ) => {
   if (
     typeof assetName !== 'string' ||
-    !assetName.endsWith('.js') ||
+    !isManifestJsAsset(assetName) ||
     typeof integrity !== 'string'
   ) {
     return;
@@ -117,7 +118,7 @@ export const collectSubresourceIntegrity = (
     const assets =
       compilation.getAssets() as readonly CompilationAssetWithIntegrity[];
     for (const asset of assets) {
-      if (!asset.name.endsWith('.js')) {
+      if (!isManifestJsAsset(asset.name)) {
         continue;
       }
       addIntegrity(
@@ -200,8 +201,7 @@ export function registerModifyBrowserManifestAssets(
 
     if (isBuild) {
       const entryAssets = stats?.assetsByChunkName?.['entry.client'];
-      const entryJsAssets =
-        entryAssets?.filter(asset => asset.endsWith('.js')) || [];
+      const entryJsAssets = entryAssets?.filter(isManifestJsAsset) || [];
       const manifestPath = getReactRouterManifestPath({
         version: manifest.version,
         isBuild: true,

package/src/plugin-utils.ts

@@ -79,34 +79,48 @@ export function normalizeAssetPrefix(assetPrefix?: string): string {
   return assetPrefix.endsWith('/') ? assetPrefix : `${assetPrefix}/`;
 }
 
+type AssetPrefixConfig = {
+  dev?: { assetPrefix?: unknown };
+  output?: { assetPrefix?: unknown };
+};
+
+const asString = (value: unknown): string | undefined =>
+  typeof value === 'string' ? value : undefined;
+
+const pickConfiguredAssetPrefix = (
+  { dev, output }: AssetPrefixConfig,
+  isBuild: boolean
+): string | undefined =>
+  isBuild
+    ? asString(output?.assetPrefix)
+    : (asString(dev?.assetPrefix) ?? asString(output?.assetPrefix));
+
 /**
- * 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`.
+ * 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 normalize to the root prefix `'/'`.
+ * boolean/`'auto'`/empty values ultimately normalize to the root prefix `'/'`.
  */
-export function resolveEffectiveAssetPrefix(config: {
-  dev?: { assetPrefix?: unknown };
-  output?: { assetPrefix?: unknown };
-  isBuild: boolean;
-}): string {
-  const outputPrefix =
-    typeof config.output?.assetPrefix === 'string'
-      ? config.output.assetPrefix
-      : undefined;
-  if (config.isBuild) {
-    return normalizeAssetPrefix(outputPrefix);
+export function resolveEffectiveAssetPrefix(
+  config: AssetPrefixConfig & { isBuild: boolean },
+  ...fallbacks: AssetPrefixConfig[]
+): string {
+  for (const candidate of [config, ...fallbacks]) {
+    const prefix = pickConfiguredAssetPrefix(candidate, config.isBuild);
+    if (prefix && prefix !== 'auto') {
+      return normalizeAssetPrefix(prefix);
+    }
   }
-  const devPrefix =
-    typeof config.dev?.assetPrefix === 'string'
-      ? config.dev.assetPrefix
-      : undefined;
-  return normalizeAssetPrefix(devPrefix ?? outputPrefix);
+  return '/';
 }
 
 export function createRouteId(file: string): string {

package/src/rsc-route-transforms.ts

@@ -623,6 +623,12 @@ const createServerRouteEntry = async (
   let needsReactImport = false;
   let needsEnsureHmrImport = false;
   let needsStyleEntryImport = false;
+  const pushStylesheetLinks = (entryCssFilesExpression: string): void => {
+    lines.push(`    ...(${entryCssFilesExpression} ?? []).map(href =>`);
+    lines.push(
+      '      React.createElement("link", { key: href, rel: "stylesheet", href: href, precedence: "default" })),'
+    );
+  };
 
   // A client route whose default component is a client reference: its bundled
   // (non-vanilla) side-effect CSS is orphaned in the initial browser entry
@@ -651,12 +657,7 @@ const createServerRouteEntry = async (
         '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" })),'
-      );
+      pushStylesheetLinks(`${RSC_ROUTE_STYLE_ENTRY_EXPORT}.entryCssFiles`);
       lines.push('    React.createElement(RscClientRouteDefault___, props),');
       lines.push('  );');
       lines.push('}');
@@ -682,12 +683,7 @@ const createServerRouteEntry = async (
       // graph contributes. Render those as stylesheet links at the top of the
       // stream (mirrors upstream's `import.meta.viteRsc.loadCss()`); React's
       // float support hoists them into `<head>`.
-      lines.push(
-        `    ...(${exportName}WithoutClientChunk.entryCssFiles ?? []).map(href =>`
-      );
-      lines.push(
-        '      React.createElement("link", { key: href, rel: "stylesheet", href: href, precedence: "default" })),'
-      );
+      pushStylesheetLinks(`${exportName}WithoutClientChunk.entryCssFiles`);
       lines.push(
         '    React.createElement(EnsureClientRouteModuleForHMR___, null),'
       );

package/src/rsc-virtual-modules.ts

@@ -1,7 +1,7 @@
 import { relative, resolve } from 'pathe';
 import type { Config } from './react-router-config.js';
 import type { Route } from './types.js';
-import { combineURLs, normalizeAssetPrefix } from './plugin-utils.js';
+import { normalizeAssetPrefix } from './plugin-utils.js';
 import { getVirtualModuleFilePath } from './virtual-modules.js';
 import {
   createRscInternalClientModule,
@@ -19,6 +19,7 @@ const RSC_VIRTUAL_ALIAS_IDS = [
   'allowed-action-origins',
   'client-version',
   'react-router-serve-config',
+  'manifest-prefix',
   'bootstrap-scripts',
   'server-manifest',
 ] as const;
@@ -29,8 +30,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'];
@@ -73,7 +72,6 @@ export const createReactRouterRscVirtualModules = ({
   basename,
   buildDirectory,
   isBuild,
-  jsDistPath,
   outputClientPath,
   publicPath,
   routeDiscovery,
@@ -84,7 +82,10 @@ export const createReactRouterRscVirtualModules = ({
     resolve(buildDirectory, 'server'),
     outputClientPath
   );
-  const bootstrapPublicPath = normalizeAssetPrefix(publicPath);
+  // Absolute prefix the server must use for initial asset URLs (see
+  // `resolveEffectiveAssetPrefix`); the browser compiler may itself be on
+  // `'auto'`, which no server-rendered URL can express.
+  const serverPublicPath = normalizeAssetPrefix(publicPath);
 
   return {
     'virtual/react-router/unstable_rsc/routes': createRscRouteConfig({
@@ -111,9 +112,51 @@ export const createReactRouterRscVirtualModules = ({
         assetsBuildDirectory: rscAssetsBuildDirectory,
         publicPath,
       }),
-    'virtual/react-router/unstable_rsc/bootstrap-scripts': defaultExport([
-      combineURLs(bootstrapPublicPath, `${jsDistPath}/index.js`),
-    ]),
+    // Every server-facing asset URL in the rspack RSC manifest -- bootstrap
+    // `entryJsFiles`, route `entryCssFiles`, client references' `cssFiles`
+    // (react-server-dom-rspack renders those as <link>s), and Flight's
+    // `moduleLoading.prefix` for client-chunk preloads -- carries the browser
+    // compiler's public path, recorded in `moduleLoading.prefix`. With the
+    // browser compiler on `'auto'` rspack records `/`, which the server cannot
+    // serve from. `__rspack_rsc_manifest__` is this same object, so aligning
+    // it once, in place (arrays are mutated, not replaced, because
+    // `createServerEntry` has already captured references), makes every
+    // consumer agree on the server prefix without stacking a second one. The
+    // aligned manifest is exported (not imported for side effects only) so a
+    // `sideEffects: false` package cannot tree-shake the alignment away.
+    '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;
+`,
+    // The compiled browser entry scripts come from the manifest (like Next's
+    // `buildManifest` or the Vite plugin's `loadBootstrapScriptContent`), so
+    // hashed entry filenames resolve without any naming contract. The list and
+    // its order are preserved. An empty list is a build problem (rspack only
+    // records entry files named `*.js`); fail loudly instead of guessing a
+    // filename that would render a document which cannot hydrate.
+    '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;
 }