rsbuild-plugin-react-router 0.6.3 → 0.6.4

package/dist/511.js

@@ -679,7 +679,7 @@ let mightContainRouteChunkExportName = (source)=>routeChunkExportNames.some((exp
         invalidChunks.map((name)=>`- ${name}`).join('\n'),
         `${plural ? 'These exports' : 'This export'} could not be split into ${plural ? 'their own chunks' : 'its own chunk'} because ${plural ? 'they share' : 'it shares'} code with other exports. You should extract any shared code into its own module and then import it within the route module.`
     ].join('\n\n'));
-}, getRouteEntryBaseName = (route, appDirectory)=>normalizeRelativeFilePath(route.file, appDirectory).replace(/^[A-Za-z]:/, '').split('/').filter((segment)=>'' !== segment && '.' !== segment).map((segment)=>'..' === segment ? '__' : segment).join('/').replace(/\.[^/.]+$/, ''), getRouteChunkEntryName = (route, chunkName, appDirectory)=>`${getRouteEntryBaseName(route, appDirectory)}-${routeChunkEntrySuffix[chunkName]}`, setBoundedCacheEntry = (cache, key, value, maxEntries)=>{
+}, getRouteEntryBaseName = (route, appDirectory)=>createRouteId(normalizeRelativeFilePath(route.file, appDirectory).replace(/^[A-Za-z]:/, '').split('/').filter((segment)=>'' !== segment && '.' !== segment).map((segment)=>'..' === segment ? '__' : segment).join('/')), getRouteChunkEntryName = (routeEntryBaseName, chunkName)=>`${routeEntryBaseName}-${routeChunkEntrySuffix[chunkName]}`, setBoundedCacheEntry = (cache, key, value, maxEntries)=>{
     if (maxEntries <= 0) return void cache.clear();
     if (!cache.has(key) && cache.size >= maxEntries) {
         let oldestEntry = cache.keys().next();

package/dist/index.cjs

@@ -11665,7 +11665,7 @@ const external_react_router_namespaceObject = require("react-router"), normalize
         invalidChunks.map((name)=>`- ${name}`).join('\n'),
         `${plural ? 'These exports' : 'This export'} could not be split into ${plural ? 'their own chunks' : 'its own chunk'} because ${plural ? 'they share' : 'it shares'} code with other exports. You should extract any shared code into its own module and then import it within the route module.`
     ].join('\n\n'));
-}, getRouteEntryBaseName = (route, appDirectory)=>toSafeEntryPath(normalizeRelativeFilePath(route.file, appDirectory)).replace(/\.[^/.]+$/, ''), getRouteChunkEntryName = (route, chunkName, appDirectory)=>`${getRouteEntryBaseName(route, appDirectory)}-${routeChunkEntrySuffix[chunkName]}`, setBoundedCacheEntry = (cache1, key, value, maxEntries)=>{
+}, getRouteEntryBaseName = (route, appDirectory)=>createRouteId(toSafeEntryPath(normalizeRelativeFilePath(route.file, appDirectory))), getRouteChunkEntryName = (routeEntryBaseName, chunkName)=>`${routeEntryBaseName}-${routeChunkEntrySuffix[chunkName]}`, setBoundedCacheEntry = (cache1, key, value, maxEntries)=>{
     if (maxEntries <= 0) return void cache1.clear();
     if (!cache1.has(key) && cache1.size >= maxEntries) {
         let oldestEntry = cache1.keys().next();
@@ -11872,16 +11872,25 @@ const createReactRouterManifestOptions = ({ routeChunks, routeModuleAnalysis })=
     if (!isBuild) return 'static/js/virtual/react-router/browser-manifest.js';
     let dir = getManifestDirFromEntryAsset(entryModulePath);
     return `${dir}/manifest-${version}.js`;
-}, getManifestVersion = (fingerprintedValues)=>(0, external_node_crypto_namespaceObject.createHash)('md5').update(JSON.stringify(fingerprintedValues)).digest('hex').slice(0, 8), getReactRouterManifestChunkNames = (routes, appDirectory, splitRouteModules = !1)=>{
+}, getReactRouterManifestChunkNames = (routes, appDirectory, splitRouteModules = !1)=>{
     let chunkNames = new Set([
         'entry.client'
     ]);
-    for (let route of Object.values(routes))if (chunkNames.add(getRouteEntryBaseName(route, appDirectory)), splitRouteModules && 'root' !== route.id) for (let exportName of routeChunkExportNames)chunkNames.add(getRouteChunkEntryName(route, exportName, appDirectory));
+    for (let route of Object.values(routes)){
+        let routeEntryName = getRouteEntryBaseName(route, appDirectory);
+        if (chunkNames.add(routeEntryName), splitRouteModules && 'root' !== route.id) for (let exportName of routeChunkExportNames)chunkNames.add(getRouteChunkEntryName(routeEntryName, exportName));
+    }
     return chunkNames;
-}, createRouteManifestItem = ({ route, appDirectory, assetPrefix, jsAssets, routeAnalysis, getModulePathForChunk, getCssAssetsForChunk })=>{
-    let routeChunkMap = routeAnalysis.hasRouteChunkByExportName, chunkModulePath = (exportName)=>routeChunkMap?.[exportName] ? getModulePathForChunk(getRouteChunkEntryName(route, exportName, appDirectory)) : void 0, cssAssets = [
+}, createRouteManifestItem = ({ route, routeEntryName, assetPrefix, jsAssets, routeAnalysis, getModulePathForChunk, getCssAssetsForChunk })=>{
+    let routeChunkMap = routeAnalysis.hasRouteChunkByExportName, chunkEntryName = (exportName)=>routeChunkMap?.[exportName] ? getRouteChunkEntryName(routeEntryName, exportName) : void 0, chunkModulePath = (exportName)=>{
+        let name = chunkEntryName(exportName);
+        return name ? getModulePathForChunk(name) : void 0;
+    }, cssAssets = [
         ...routeAnalysis.cssAssets,
-        ...routeChunkExportNames.flatMap((exportName)=>routeChunkMap?.[exportName] ? getCssAssetsForChunk(getRouteChunkEntryName(route, exportName, appDirectory)) : [])
+        ...routeChunkExportNames.flatMap((exportName)=>{
+            let name = chunkEntryName(exportName);
+            return name ? getCssAssetsForChunk(name) : [];
+        })
     ];
     return {
         id: route.id,
@@ -11933,7 +11942,7 @@ function generateReactRouterManifestForDevEffect(routes, clientStats, context, a
                     key,
                     createRouteManifestItem({
                         route,
-                        appDirectory: context,
+                        routeEntryName,
                         assetPrefix,
                         jsAssets,
                         routeAnalysis,
@@ -11953,7 +11962,7 @@ function generateReactRouterManifestForDevEffect(routes, clientStats, context, a
                 css: entryCssAssets.map((asset)=>combineURLs(assetPrefix, asset))
             },
             routes: result
-        }, version = getManifestVersion(fingerprintedValues), manifestPath = getReactRouterManifestPath({
+        }, version = (0, external_node_crypto_namespaceObject.createHash)('md5').update(JSON.stringify(fingerprintedValues)).digest('hex').slice(0, 8), manifestPath = getReactRouterManifestPath({
             version,
             isBuild,
             entryModulePath: entryJsAssets[0]
@@ -15477,9 +15486,10 @@ export {
 }, createClassicWebRouteEntries = ({ appDirectory, isBuild, routes, splitRouteModules })=>{
     let manifestChunkNames = new Set([
         'entry.client'
-    ]), webRouteEntries = Object.values(routes).reduce((acc, route)=>{
-        let entryName = getRouteEntryBaseName(route, appDirectory), routeFilePath = (0, external_pathe_namespaceObject.resolve)(appDirectory, route.file);
-        if (manifestChunkNames.add(entryName), acc[entryName] = {
+    ]), routeFileByEntryName = new Map(), webRouteEntries = Object.values(routes).reduce((acc, route)=>{
+        let entryName = getRouteEntryBaseName(route, appDirectory), routeFilePath = (0, external_pathe_namespaceObject.resolve)(appDirectory, route.file), existingRouteFile = routeFileByEntryName.get(entryName);
+        if (void 0 !== existingRouteFile && existingRouteFile !== routeFilePath) throw Error(`[rsbuild-plugin-react-router] Route files ${JSON.stringify(existingRouteFile)} and ${JSON.stringify(routeFilePath)} both resolve to the entry name ${JSON.stringify(entryName)}. Rename one of them so their paths relative to the app directory differ.`);
+        if (routeFileByEntryName.set(entryName, routeFilePath), manifestChunkNames.add(entryName), acc[entryName] = {
             import: `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
             html: !1
         }, isBuild && splitRouteModules && 'root' !== route.id) {
@@ -15492,7 +15502,7 @@ export {
             }
             for (let exportName of routeChunkExportNames){
                 if (!source.includes(exportName)) continue;
-                let chunkEntryName = getRouteChunkEntryName(route, exportName, appDirectory);
+                let chunkEntryName = getRouteChunkEntryName(entryName, exportName);
                 manifestChunkNames.add(chunkEntryName), acc[chunkEntryName] = {
                     import: getRouteChunkModuleId(routeFilePath, exportName),
                     html: !1
@@ -15814,7 +15824,7 @@ export {
                     throw Error(`Error loading ${displayPath}: ${error}`);
                 }
             } else console.warn('No react-router.config found, using default configuration.');
-            let { resolved: resolvedConfig, userAndPresetConfig, presets: configPresets, hasConfiguredServerModuleFormat } = await effectRuntime.runPromise(resolveReactRouterConfigEffect(reactRouterUserConfig)), { appDirectory, basename, buildDirectory, future, allowedActionOrigins, routeDiscovery: userRouteDiscovery, ssr, prerender: prerenderConfig, serverBuildFile, serverBundles, serverModuleFormat, splitRouteModules, subResourceIntegrity, buildEnd } = resolvedConfig;
+            let { resolved: resolvedConfig, presets: configPresets, hasConfiguredServerModuleFormat } = await effectRuntime.runPromise(resolveReactRouterConfigEffect(reactRouterUserConfig)), { appDirectory, basename, buildDirectory, future, allowedActionOrigins, routeDiscovery: userRouteDiscovery, ssr, prerender: prerenderConfig, serverBuildFile, serverBundles, serverModuleFormat, splitRouteModules, subResourceIntegrity, buildEnd } = resolvedConfig;
             await registerReactRouterTypegen(api, {
                 runtime: effectRuntime,
                 appDirectory
@@ -15910,10 +15920,7 @@ export {
             for (let preset of configPresets)await preset.reactRouterConfigResolved?.({
                 reactRouterConfig: resolvedConfigForPreset
             });
-            let buildEndReactRouterConfig = {
-                ...resolvedConfigWithRoutes,
-                future: userAndPresetConfig.future ?? {}
-            }, isBuild = 'build' === api.context.action;
+            let isBuild = 'build' === api.context.action;
             isBuild || api.onAfterEnvironmentCompile(({ environment, stats })=>{
                 'node' === environment.name && stats && !stats.hasErrors() && registerDevServerSourceMaps(stats.compilation);
             });
@@ -16057,7 +16064,7 @@ export {
                         routeChunkOptions: modePlan.routeChunkOptions,
                         routeModuleAnalysis,
                         buildManifest: modePlan.artifacts.buildManifest,
-                        buildEndReactRouterConfig,
+                        buildEndReactRouterConfig: resolvedConfigWithRoutes,
                         buildEnd
                     })))) : api.onAfterBuild(({ environments })=>effectRuntime.runPromise(tryPluginPromise(()=>runReactRouterRscPrerenderBuild({
                         api,

package/dist/index.js

@@ -7463,10 +7463,16 @@ async function generateReactRouterManifestForDev(routes, _options, clientStats,
                     valid: buildManifestChunkValidity(routeAnalysis.exports, routeAnalysis.hasRouteChunkByExportName ?? createEmptyRouteChunkByExportName())
                 }), [
                     key,
-                    (({ route, appDirectory, assetPrefix, jsAssets, routeAnalysis, getModulePathForChunk, getCssAssetsForChunk })=>{
-                        let routeChunkMap = routeAnalysis.hasRouteChunkByExportName, chunkModulePath = (exportName)=>routeChunkMap?.[exportName] ? getModulePathForChunk(getRouteChunkEntryName(route, exportName, appDirectory)) : void 0, cssAssets = [
+                    (({ route, routeEntryName, assetPrefix, jsAssets, routeAnalysis, getModulePathForChunk, getCssAssetsForChunk })=>{
+                        let routeChunkMap = routeAnalysis.hasRouteChunkByExportName, chunkEntryName = (exportName)=>routeChunkMap?.[exportName] ? getRouteChunkEntryName(routeEntryName, exportName) : void 0, chunkModulePath = (exportName)=>{
+                            let name = chunkEntryName(exportName);
+                            return name ? getModulePathForChunk(name) : void 0;
+                        }, cssAssets = [
                             ...routeAnalysis.cssAssets,
-                            ...routeChunkExportNames.flatMap((exportName)=>routeChunkMap?.[exportName] ? getCssAssetsForChunk(getRouteChunkEntryName(route, exportName, appDirectory)) : [])
+                            ...routeChunkExportNames.flatMap((exportName)=>{
+                                let name = chunkEntryName(exportName);
+                                return name ? getCssAssetsForChunk(name) : [];
+                            })
                         ];
                         return {
                             id: route.id,
@@ -7491,7 +7497,7 @@ async function generateReactRouterManifestForDev(routes, _options, clientStats,
                         };
                     })({
                         route,
-                        appDirectory: context,
+                        routeEntryName,
                         assetPrefix: assetPrefix,
                         jsAssets,
                         routeAnalysis,
@@ -9742,9 +9748,10 @@ export {
     let reactRouterPath, reactRouterDomPath, { manifestChunkNames, webRouteEntries } = (({ appDirectory, isBuild, routes, splitRouteModules })=>{
         let manifestChunkNames = new Set([
             'entry.client'
-        ]), webRouteEntries = Object.values(routes).reduce((acc, route)=>{
-            let entryName = getRouteEntryBaseName(route, appDirectory), routeFilePath = external_pathe_resolve(appDirectory, route.file);
-            if (manifestChunkNames.add(entryName), acc[entryName] = {
+        ]), routeFileByEntryName = new Map(), webRouteEntries = Object.values(routes).reduce((acc, route)=>{
+            let entryName = getRouteEntryBaseName(route, appDirectory), routeFilePath = external_pathe_resolve(appDirectory, route.file), existingRouteFile = routeFileByEntryName.get(entryName);
+            if (void 0 !== existingRouteFile && existingRouteFile !== routeFilePath) throw Error(`[rsbuild-plugin-react-router] Route files ${JSON.stringify(existingRouteFile)} and ${JSON.stringify(routeFilePath)} both resolve to the entry name ${JSON.stringify(entryName)}. Rename one of them so their paths relative to the app directory differ.`);
+            if (routeFileByEntryName.set(entryName, routeFilePath), manifestChunkNames.add(entryName), acc[entryName] = {
                 import: `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
                 html: !1
             }, isBuild && splitRouteModules && 'root' !== route.id) {
@@ -9757,7 +9764,7 @@ export {
                 }
                 for (let exportName of routeChunkExportNames){
                     if (!source.includes(exportName)) continue;
-                    let chunkEntryName = getRouteChunkEntryName(route, exportName, appDirectory);
+                    let chunkEntryName = getRouteChunkEntryName(entryName, exportName);
                     manifestChunkNames.add(chunkEntryName), acc[chunkEntryName] = {
                         import: getRouteChunkModuleId(routeFilePath, exportName),
                         html: !1
@@ -10111,7 +10118,7 @@ export {
                     throw Error(`Error loading ${displayPath}: ${error}`);
                 }
             } else console.warn('No react-router.config found, using default configuration.');
-            let { resolved: resolvedConfig, userAndPresetConfig, presets: configPresets, hasConfiguredServerModuleFormat } = await effectRuntime.runPromise((reactRouterUserConfig = reactRouterUserConfig1, core_gen(function*() {
+            let { resolved: resolvedConfig, presets: configPresets, hasConfiguredServerModuleFormat } = await effectRuntime.runPromise((reactRouterUserConfig = reactRouterUserConfig1, core_gen(function*() {
                 let userAndPresetConfigs = ((...configs)=>configs.reduce((configA, configB)=>{
                         let mergeRequired = (key)=>void 0 !== configA[key] && void 0 !== configB[key];
                         return {
@@ -10393,10 +10400,7 @@ export {
             for (let preset of configPresets)await preset.reactRouterConfigResolved?.({
                 reactRouterConfig: resolvedConfigForPreset
             });
-            let buildEndReactRouterConfig = {
-                ...resolvedConfigWithRoutes,
-                future: userAndPresetConfig.future ?? {}
-            }, isBuild = 'build' === api.context.action;
+            let isBuild = 'build' === api.context.action;
             isBuild || api.onAfterEnvironmentCompile(({ environment, stats })=>{
                 'node' === environment.name && stats && !stats.hasErrors() && ((compilation)=>{
                     let outputPath = compilation.outputOptions.path;
@@ -10910,7 +10914,7 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                         routeChunkOptions: modePlan.routeChunkOptions,
                         routeModuleAnalysis,
                         buildManifest: modePlan.artifacts.buildManifest,
-                        buildEndReactRouterConfig,
+                        buildEndReactRouterConfig: resolvedConfigWithRoutes,
                         buildEnd
                     })))) : api.onAfterBuild(({ environments })=>effectRuntime.runPromise(tryPluginPromise(()=>runReactRouterRscPrerenderBuild({
                         api,
@@ -11254,7 +11258,10 @@ if (typeof window !== 'undefined' && import.meta.webpackHot) {
                     let chunkNames = new Set([
                         'entry.client'
                     ]);
-                    for (let route of Object.values(routes))if (chunkNames.add(getRouteEntryBaseName(route, appDirectory)), splitRouteModules && 'root' !== route.id) for (let exportName of routeChunkExportNames)chunkNames.add(getRouteChunkEntryName(route, exportName, appDirectory));
+                    for (let route of Object.values(routes)){
+                        let routeEntryName = getRouteEntryBaseName(route, appDirectory);
+                        if (chunkNames.add(routeEntryName), splitRouteModules && 'root' !== route.id) for (let exportName of routeChunkExportNames)chunkNames.add(getRouteChunkEntryName(routeEntryName, exportName));
+                    }
                     return chunkNames;
                 })(routes, appDirectory, routeChunkOptions?.splitRouteModules), isBuild = !!routeChunkOptions?.isBuild, finalizeSri = !!(isBuild && (options?.subResourceIntegrity ?? options?.future?.unstable_subResourceIntegrity)), buildAndEmitManifest = async ({ assets, sources, compilation }, { withSri })=>{
                     let currentAssetPrefix = getAssetPrefix(), stats = createReactRouterManifestStats(compilation, manifestChunkNames), { manifest, moduleExportsByRouteId } = await generateReactRouterManifestForDev(routes, pluginOptions, stats, appDirectory, currentAssetPrefix, createReactRouterManifestOptions({

package/dist/route-chunks.d.ts

@@ -40,7 +40,5 @@ export declare const validateRouteChunks: (args: {
 export declare const getRouteEntryBaseName: (route: {
     file: string;
 }, appDirectory: string) => string;
-export declare const getRouteChunkEntryName: (route: {
-    file: string;
-}, chunkName: RouteChunkExportName, appDirectory: string) => string;
+export declare const getRouteChunkEntryName: (routeEntryBaseName: string, chunkName: RouteChunkExportName) => string;
 export {};

package/package.json

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

package/src/classic-mode.ts

@@ -143,10 +143,26 @@ export const createClassicWebRouteEntries = ({
   webRouteEntries: Record<string, RsbuildEntryDescription>;
 } => {
   const manifestChunkNames = new Set<string>(['entry.client']);
+  // Entry names are sanitized paths, so two distinct route files could in
+  // principle map to one name (for example `../shared/x.tsx` and
+  // `__/shared/x.tsx`). Refuse that instead of letting one route silently
+  // serve the other's module. Routes that share a file intentionally share
+  // an entry.
+  const routeFileByEntryName = new Map<string, string>();
   const webRouteEntries = Object.values(routes).reduce(
     (acc, route) => {
       const entryName = getRouteEntryBaseName(route, appDirectory);
       const routeFilePath = resolve(appDirectory, route.file);
+      const existingRouteFile = routeFileByEntryName.get(entryName);
+      if (
+        existingRouteFile !== undefined &&
+        existingRouteFile !== routeFilePath
+      ) {
+        throw new Error(
+          `[rsbuild-plugin-react-router] Route files ${JSON.stringify(existingRouteFile)} and ${JSON.stringify(routeFilePath)} both resolve to the entry name ${JSON.stringify(entryName)}. Rename one of them so their paths relative to the app directory differ.`
+        );
+      }
+      routeFileByEntryName.set(entryName, routeFilePath);
       manifestChunkNames.add(entryName);
       acc[entryName] = {
         import: `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
@@ -167,11 +183,7 @@ export const createClassicWebRouteEntries = ({
           if (!source.includes(exportName)) {
             continue;
           }
-          const chunkEntryName = getRouteChunkEntryName(
-            route,
-            exportName,
-            appDirectory
-          );
+          const chunkEntryName = getRouteChunkEntryName(entryName, exportName);
           manifestChunkNames.add(chunkEntryName);
           acc[chunkEntryName] = {
             import: getRouteChunkModuleId(routeFilePath, exportName),

package/src/index.ts

@@ -263,7 +263,6 @@ export const pluginReactRouter = (
 
     const {
       resolved: resolvedConfig,
-      userAndPresetConfig,
       presets: configPresets,
       hasConfiguredServerModuleFormat,
     } = await effectRuntime.runPromise(
@@ -472,10 +471,7 @@ export const pluginReactRouter = (
           resolvedConfigForPreset as ReactRouterPresetResolvedConfig,
       });
     }
-    const buildEndReactRouterConfig: ResolvedReactRouterConfig = {
-      ...resolvedConfigWithRoutes,
-      future: userAndPresetConfig.future ?? {},
-    } as ResolvedReactRouterConfig;
+    const buildEndReactRouterConfig = resolvedConfigWithRoutes;
 
     const isBuild = api.context.action === 'build';
     if (!isBuild) {

package/src/manifest.ts

@@ -413,26 +413,6 @@ export const getReactRouterManifestPath = ({
   return `${dir}/manifest-${version}.js`;
 };
 
-// The version is derived from the manifest content in every mode. React
-// Router's stale-client detection compares the version the browser loaded with
-// the one the server build was pinned to, and answers a mismatch with a
-// document reload. In development the browser manifest asset is served from
-// the latest web compilation while the server build stays pinned to the
-// compilation it was committed with, so a random per-compilation version made
-// the two disagree whenever a web compilation completed without changing the
-// manifest (for example the hot data revalidation recompile that follows a
-// server change), reloading the document for no reason. Equal content now
-// yields an equal version, and a real manifest change still busts the browser
-// cache through the `?v=` query on the development manifest URL.
-const getManifestVersion = (fingerprintedValues: {
-  entry: unknown;
-  routes: unknown;
-}): string =>
-  createHash('md5')
-    .update(JSON.stringify(fingerprintedValues))
-    .digest('hex')
-    .slice(0, 8);
-
 export const getReactRouterManifestChunkNames = (
   routes: Record<string, Route>,
   appDirectory: string,
@@ -440,12 +420,13 @@ export const getReactRouterManifestChunkNames = (
 ): Set<string> => {
   const chunkNames = new Set<string>(['entry.client']);
   for (const route of Object.values(routes)) {
-    chunkNames.add(getRouteEntryBaseName(route, appDirectory));
+    const routeEntryName = getRouteEntryBaseName(route, appDirectory);
+    chunkNames.add(routeEntryName);
     if (!splitRouteModules || route.id === 'root') {
       continue;
     }
     for (const exportName of routeChunkExportNames) {
-      chunkNames.add(getRouteChunkEntryName(route, exportName, appDirectory));
+      chunkNames.add(getRouteChunkEntryName(routeEntryName, exportName));
     }
   }
   return chunkNames;
@@ -453,7 +434,7 @@ export const getReactRouterManifestChunkNames = (
 
 const createRouteManifestItem = ({
   route,
-  appDirectory,
+  routeEntryName,
   assetPrefix,
   jsAssets,
   routeAnalysis,
@@ -461,7 +442,7 @@ const createRouteManifestItem = ({
   getCssAssetsForChunk,
 }: {
   route: Route;
-  appDirectory: string;
+  routeEntryName: string;
   assetPrefix: string;
   jsAssets: string[];
   routeAnalysis: RouteManifestAnalysis;
@@ -469,21 +450,20 @@ const createRouteManifestItem = ({
   getCssAssetsForChunk: (chunkName: string) => string[];
 }): RouteManifestItem => {
   const routeChunkMap = routeAnalysis.hasRouteChunkByExportName;
-  const chunkModulePath = (exportName: RouteChunkExportName) =>
+  const chunkEntryName = (exportName: RouteChunkExportName) =>
     routeChunkMap?.[exportName]
-      ? getModulePathForChunk(
-          getRouteChunkEntryName(route, exportName, appDirectory)
-        )
+      ? getRouteChunkEntryName(routeEntryName, exportName)
       : undefined;
+  const chunkModulePath = (exportName: RouteChunkExportName) => {
+    const name = chunkEntryName(exportName);
+    return name ? getModulePathForChunk(name) : undefined;
+  };
   const cssAssets = [
     ...routeAnalysis.cssAssets,
-    ...routeChunkExportNames.flatMap(exportName =>
-      routeChunkMap?.[exportName]
-        ? getCssAssetsForChunk(
-            getRouteChunkEntryName(route, exportName, appDirectory)
-          )
-        : []
-    ),
+    ...routeChunkExportNames.flatMap(exportName => {
+      const name = chunkEntryName(exportName);
+      return name ? getCssAssetsForChunk(name) : [];
+    }),
   ];
 
   return {
@@ -581,7 +561,7 @@ function generateReactRouterManifestForDevEffect(
             key,
             createRouteManifestItem({
               route,
-              appDirectory: context,
+              routeEntryName,
               assetPrefix,
               jsAssets,
               routeAnalysis,
@@ -625,7 +605,14 @@ function generateReactRouterManifestForDevEffect(
       },
       routes: result,
     };
-    const version = getManifestVersion(fingerprintedValues);
+    // Content-derived in development too. React Router's stale-client check
+    // compares the browser's manifest version with the pinned server build's,
+    // and a random per-compilation version made unchanged manifests differ
+    // whenever a web compilation completed without a new server pin.
+    const version = createHash('md5')
+      .update(JSON.stringify(fingerprintedValues))
+      .digest('hex')
+      .slice(0, 8);
     const manifestPath = getReactRouterManifestPath({
       version,
       isBuild,

package/src/route-chunks.ts

@@ -7,6 +7,7 @@ import { print } from 'yuku-codegen';
 import { walk } from 'yuku-parser';
 import { dirname, normalize, relative, resolve } from 'pathe';
 import { SERVER_ONLY_ROUTE_EXPORTS_SET } from './constants.js';
+import { createRouteId } from './plugin-utils.js';
 
 type AnyNode = Record<string, any>;
 
@@ -984,16 +985,11 @@ export const getRouteEntryBaseName = (
   route: { file: string },
   appDirectory: string
 ): string =>
-  toSafeEntryPath(normalizeRelativeFilePath(route.file, appDirectory)).replace(
-    /\.[^/.]+$/,
-    ''
+  createRouteId(
+    toSafeEntryPath(normalizeRelativeFilePath(route.file, appDirectory))
   );
 
 export const getRouteChunkEntryName = (
-  route: { file: string },
-  chunkName: RouteChunkExportName,
-  appDirectory: string
-): string =>
-  `${getRouteEntryBaseName(route, appDirectory)}-${
-    routeChunkEntrySuffix[chunkName]
-  }`;
+  routeEntryBaseName: string,
+  chunkName: RouteChunkExportName
+): string => `${routeEntryBaseName}-${routeChunkEntrySuffix[chunkName]}`;