rsbuild-plugin-react-router 0.5.0 → 0.6.0

package/src/route-chunks.ts

@@ -5,7 +5,8 @@ import {
 } from 'yuku-analyzer';
 import { print } from 'yuku-codegen';
 import { walk } from 'yuku-parser';
-import { normalize, relative, resolve } from 'pathe';
+import { dirname, normalize, relative, resolve } from 'pathe';
+import { SERVER_ONLY_ROUTE_EXPORTS_SET } from './constants.js';
 
 type AnyNode = Record<string, any>;
 
@@ -15,7 +16,7 @@ export type RouteChunkExportName =
   | 'clientMiddleware'
   | 'HydrateFallback';
 
-export type RouteChunkName = 'main' | RouteChunkExportName;
+export type RouteChunkName = 'main' | RouteChunkExportName | (string & {});
 
 export type RouteChunkConfig = {
   splitRouteModules?: boolean | 'enforce';
@@ -35,6 +36,7 @@ export type RouteChunkInfo = {
   hasRouteChunks: boolean;
   hasRouteChunkByExportName: Record<RouteChunkExportName, boolean>;
   chunkedExports: RouteChunkExportName[];
+  sharedChunkedExports: string[];
 };
 
 export const routeChunkExportNames: RouteChunkExportName[] = [
@@ -63,7 +65,7 @@ export const emptyRouteChunkSnippet = (): string => 'export {};';
 
 const routeChunkQueryStringPrefix = '?route-chunk=';
 
-const routeChunkQueryStrings: Record<RouteChunkName, string> = {
+const routeChunkQueryStrings: Record<RouteChunkExportName | 'main', string> = {
   main: `${routeChunkQueryStringPrefix}main`,
   clientAction: `${routeChunkQueryStringPrefix}clientAction`,
   clientLoader: `${routeChunkQueryStringPrefix}clientLoader`,
@@ -141,6 +143,7 @@ type ExportDependencies = {
   topLevelStatements: Set<AnyNode>;
   topLevelNonModuleStatements: Set<AnyNode>;
   importedIdentifierNames: Set<string>;
+  importSources: Set<string>;
   exportedVariableDeclarators: Set<AnyNode>;
 };
 
@@ -172,6 +175,18 @@ const getVariableDeclaratorForNode = (
   return null;
 };
 
+const isTopLevelExportedVariableDeclarator = (
+  module: Module,
+  node: AnyNode
+): boolean => {
+  const declaration = module.parentOf(node as never) as AnyNode | null;
+  if (declaration?.type !== 'VariableDeclaration') {
+    return false;
+  }
+  const statement = module.parentOf(declaration as never) as AnyNode | null;
+  return statement?.type === 'ExportNamedDeclaration';
+};
+
 const getExportedName = (exported: AnyNode): string => {
   if (exported.type === 'Identifier') {
     return exported.name;
@@ -194,6 +209,26 @@ const setsIntersect = <T>(set1: Set<T>, set2: Set<T>) => {
   return false;
 };
 
+const isEntryClientImport = (source: string, importer: string): boolean => {
+  if (!source.startsWith('.') && !source.startsWith('/')) {
+    return false;
+  }
+  const resolved = normalize(resolve('/', dirname(importer), source));
+  return /(?:^|\/)entry\.client(?:\.[cm]?[jt]sx?)?$/.test(resolved);
+};
+
+const hasEntryClientImport = (
+  dependencies: ExportDependencies,
+  importer: string
+): boolean => {
+  for (const source of dependencies.importSources) {
+    if (isEntryClientImport(source, importer)) {
+      return true;
+    }
+  }
+  return false;
+};
+
 const getExportDependencies = (
   code: string,
   cache: RouteChunkCache,
@@ -253,6 +288,7 @@ const getExportDependencies = (
           topLevelStatements: new Set(),
           topLevelNonModuleStatements: new Set(),
           importedIdentifierNames: new Set(),
+          importSources: new Set(),
           exportedVariableDeclarators: new Set(),
         };
         const visitedSymbols = new Set<YukuSymbol>();
@@ -278,6 +314,9 @@ const getExportDependencies = (
             return;
           }
           visitedSymbols.add(symbol);
+          if (symbol.declarations.length === 0) {
+            return;
+          }
 
           for (const declaration of symbol.declarations as AnyNode[]) {
             const statement = addCachedTopLevelStatement(
@@ -286,12 +325,15 @@ const getExportDependencies = (
             );
             if (statement.type === 'ImportDeclaration') {
               dependencies.importedIdentifierNames.add(symbol.name);
+              if (typeof statement.source?.value === 'string') {
+                dependencies.importSources.add(statement.source.value);
+              }
+              return;
             }
             const declarator = getCachedVariableDeclaratorForNode(declaration);
             if (
               declarator &&
-              getCachedTopLevelStatementForNode(declarator).type ===
-                'ExportNamedDeclaration'
+              isTopLevelExportedVariableDeclarator(module, declarator)
             ) {
               dependencies.exportedVariableDeclarators.add(declarator);
             }
@@ -336,12 +378,22 @@ const getExportDependencies = (
 
 const isExportChunkable = (
   exportName: string,
-  exportDependencies: Map<string, ExportDependencies>
+  exportDependencies: Map<string, ExportDependencies>,
+  importer: string
 ) => {
   const dependencies = exportDependencies.get(exportName);
   if (!dependencies) {
     return false;
   }
+  if (exportName === 'clientLoader' && hasHydrateAssignment(dependencies)) {
+    return false;
+  }
+  if (
+    exportName === 'clientLoader' &&
+    hasEntryClientImport(dependencies, importer)
+  ) {
+    return false;
+  }
   for (const [currentExportName, currentDependencies] of exportDependencies) {
     if (currentExportName === exportName) {
       continue;
@@ -376,6 +428,21 @@ const isExportChunkable = (
   return true;
 };
 
+const hasHydrateAssignment = (dependencies: ExportDependencies): boolean =>
+  Array.from(dependencies.topLevelNonModuleStatements).some(statement => {
+    const expression = statement.expression;
+    const left = expression?.left;
+    return (
+      statement.type === 'ExpressionStatement' &&
+      expression?.type === 'AssignmentExpression' &&
+      left?.type === 'MemberExpression' &&
+      left.object?.type === 'Identifier' &&
+      left.object.name === 'clientLoader' &&
+      left.property?.type === 'Identifier' &&
+      left.property.name === 'hydrate'
+    );
+  });
+
 const getChunkableExportMap = (
   code: string,
   cache: RouteChunkCache,
@@ -384,7 +451,7 @@ const getChunkableExportMap = (
   getOrSetFromCache(cache, `${cacheKey}::getChunkableExportMap`, code, () => {
     const exportDependencies = getExportDependencies(code, cache, cacheKey);
     return createRouteChunkExportMap(exportName =>
-      isExportChunkable(exportName, exportDependencies)
+      isExportChunkable(exportName, exportDependencies, cacheKey)
     );
   });
 
@@ -393,12 +460,18 @@ const hasChunkableExport = (
   exportName: string,
   cache: RouteChunkCache,
   cacheKey: string
-) =>
-  (routeChunkExportNames as string[]).includes(exportName)
-    ? getChunkableExportMap(code, cache, cacheKey)[
-        exportName as RouteChunkExportName
-      ]
-    : false;
+) => {
+  if ((routeChunkExportNames as string[]).includes(exportName)) {
+    return getChunkableExportMap(code, cache, cacheKey)[
+      exportName as RouteChunkExportName
+    ];
+  }
+  return isExportChunkable(
+    exportName,
+    getExportDependencies(code, cache, cacheKey),
+    cacheKey
+  );
+};
 
 const generateCode = (program: AnyNode): string | undefined => {
   if (program.body.length === 0) {
@@ -501,14 +574,12 @@ const getChunkedExport = (
   );
 };
 
-const getChunkedExportCacheKey = (
-  cacheKey: string,
-  exportName: RouteChunkExportName
-) => `${cacheKey}::getChunkedExport::${exportName}`;
+const getChunkedExportCacheKey = (cacheKey: string, exportName: string) =>
+  `${cacheKey}::getChunkedExport::${exportName}`;
 
 const hasCachedChunkedExport = (
   code: string,
-  exportName: RouteChunkExportName,
+  exportName: string,
   cache: RouteChunkCache,
   cacheKey: string
 ): boolean =>
@@ -525,11 +596,10 @@ const omitChunkedExports = (
     `${cacheKey}::omitChunkedExports::${exportNames.join(',')}`,
     code,
     () => {
-      const chunkableExportMap = getChunkableExportMap(code, cache, cacheKey);
       const exportNameSet = new Set(exportNames);
       const isOmitted = (exportName: string) =>
         exportNameSet.has(exportName) &&
-        Boolean(chunkableExportMap[exportName as RouteChunkExportName]);
+        hasChunkableExport(code, exportName, cache, cacheKey);
       const isRetained = (exportName: string) => !isOmitted(exportName);
 
       const exportDependencies = getExportDependencies(code, cache, cacheKey);
@@ -633,17 +703,57 @@ const precomputeChunkedExports = (
   cache: RouteChunkCache,
   cacheKey: string
 ) => {
-  const chunkableExportMap = getChunkableExportMap(code, cache, cacheKey);
-  for (const exportName of routeChunkExportNames) {
-    if (!chunkableExportMap[exportName]) {
+  for (const exportName of getChunkedExportNames(code, cache, cacheKey)) {
+    if (!hasChunkableExport(code, exportName, cache, cacheKey)) {
+      continue;
+    }
+    if (hasCachedChunkedExport(code, exportName, cache, cacheKey)) {
       continue;
     }
-    if (!hasCachedChunkedExport(code, exportName, cache, cacheKey)) {
+    if (
+      !hasCachedValue(
+        cache,
+        getChunkedExportCacheKey(cacheKey, exportName),
+        code
+      )
+    ) {
       getChunkedExport(code, exportName, cache, cacheKey);
     }
   }
 };
 
+const getSharedChunkedExports = (
+  exportDependencies: Map<string, ExportDependencies>,
+  cacheKey: string
+): string[] =>
+  Array.from(exportDependencies.keys())
+    .filter(
+      exportName =>
+        exportName !== 'default' &&
+        !(routeChunkExportNames as string[]).includes(exportName) &&
+        !SERVER_ONLY_ROUTE_EXPORTS_SET.has(exportName) &&
+        isExportChunkable(exportName, exportDependencies, cacheKey)
+    )
+    .sort();
+
+const getChunkedExportNames = (
+  code: string,
+  cache: RouteChunkCache,
+  cacheKey: string
+): string[] => {
+  const exportDependencies = getExportDependencies(code, cache, cacheKey);
+  const routeChunkedExports = routeChunkExportNames.filter(exportName =>
+    isExportChunkable(exportName, exportDependencies, cacheKey)
+  );
+  if (routeChunkedExports.length === 0) {
+    return [];
+  }
+  return [
+    ...routeChunkedExports,
+    ...getSharedChunkedExports(exportDependencies, cacheKey),
+  ];
+};
+
 export const detectRouteChunks = (
   code: string,
   cache: RouteChunkCache | undefined,
@@ -663,31 +773,43 @@ export const detectRouteChunks = (
   const chunkedExports = Object.entries(hasRouteChunkByExportName)
     .filter(([, isChunked]) => isChunked)
     .map(([exportName]) => exportName as RouteChunkExportName);
-  const hasRouteChunks = chunkedExports.length > 0;
+  const sharedChunkedExports =
+    chunkedExports.length > 0
+      ? getSharedChunkedExports(exportDependencies, cacheKey)
+      : [];
+  const hasRouteChunks =
+    chunkedExports.length > 0 || sharedChunkedExports.length > 0;
   return {
     exportNames: Array.from(exportDependencies.keys()),
     hasRouteChunks,
     hasRouteChunkByExportName,
     chunkedExports,
+    sharedChunkedExports,
   };
 };
 
-export const getRouteChunkCode: (
-  code: string,
-  chunkName: RouteChunkName,
-  cache: RouteChunkCache | undefined,
-  cacheKey: string
-) => string | undefined = (
+export const getRouteChunkCode = (
   code: string,
   chunkName: RouteChunkName,
   cache: RouteChunkCache | undefined,
   cacheKey: string
-) => {
+): string | undefined => {
   const analysisCache = cache ?? new Map();
   if (chunkName === 'main') {
+    const exportDependencies = getExportDependencies(
+      code,
+      analysisCache,
+      cacheKey
+    );
+    const serverOnlyExports = Array.from(exportDependencies.keys()).filter(
+      exportName => SERVER_ONLY_ROUTE_EXPORTS_SET.has(exportName)
+    );
     return omitChunkedExports(
       code,
-      routeChunkExportNames,
+      [
+        ...getChunkedExportNames(code, analysisCache, cacheKey),
+        ...serverOnlyExports,
+      ],
       analysisCache,
       cacheKey
     );
@@ -701,13 +823,17 @@ export const getRouteChunkCode: (
 export const getRouteChunkModuleId = (
   filePath: string,
   chunkName: RouteChunkName
-) => `${filePath}${routeChunkQueryStrings[chunkName]}`;
+) =>
+  `${filePath}${
+    routeChunkQueryStrings[chunkName as RouteChunkExportName | 'main'] ??
+    `${routeChunkQueryStringPrefix}${encodeURIComponent(chunkName)}`
+  }`;
 
-export const isRouteChunkModuleId: (id: string) => boolean = (id: string) =>
+export const isRouteChunkModuleId = (id: string): boolean =>
   getRouteChunkNameFromModuleId(id) !== null;
 
 const isRouteChunkName = (name: string): name is RouteChunkName =>
-  name === 'main' || (routeChunkExportNames as string[]).includes(name);
+  name === 'main' || /^[A-Za-z_$][\w$]*$/.test(name);
 
 export const getRouteChunkNameFromModuleId = (
   id: string
@@ -769,20 +895,16 @@ export const buildManifestChunkValidity = (
       !exportNames.has(exportName) || hasRouteChunkByExportName[exportName]
   );
 
-export const detectRouteChunksIfEnabled: (
+export const detectRouteChunksIfEnabled = async (
   cache: RouteChunkCache | undefined,
   config: RouteChunkConfig,
   id: string,
   code: string
-) => Promise<RouteChunkInfo> = async (
-  cache: RouteChunkCache | undefined,
-  config: RouteChunkConfig,
-  id: string,
-  code: string
-) => {
+): Promise<RouteChunkInfo> => {
   const noRouteChunks = (): RouteChunkInfo => ({
     exportNames: [],
     chunkedExports: [] as RouteChunkExportName[],
+    sharedChunkedExports: [],
     hasRouteChunks: false,
     hasRouteChunkByExportName: createEmptyRouteChunkByExportName(),
   });
@@ -795,19 +917,13 @@ export const detectRouteChunksIfEnabled: (
   return detectRouteChunks(code, cache, cacheKey);
 };
 
-export const getRouteChunkIfEnabled: (
-  cache: RouteChunkCache | undefined,
-  config: RouteChunkConfig,
-  id: string,
-  chunkName: RouteChunkName,
-  code: string
-) => Promise<string | null> = async (
+export const getRouteChunkIfEnabled = async (
   cache: RouteChunkCache | undefined,
   config: RouteChunkConfig,
   id: string,
   chunkName: RouteChunkName,
   code: string
-) => {
+): Promise<string | null> => {
   if (!config.splitRouteModules) {
     return null;
   }

package/src/route-component-transform.ts

@@ -16,21 +16,14 @@ import {
   type AnyNode,
 } from './route-ast.js';
 
-export function toFunctionExpression(decl: AnyNode): AnyNode {
-  return {
-    ...decl,
-    type: 'FunctionExpression',
-    declare: undefined,
-  };
-}
-
-export function toClassExpression(decl: AnyNode): AnyNode {
-  return {
-    ...decl,
-    type: 'ClassExpression',
-    declare: undefined,
-  };
-}
+const toExpression = (
+  decl: AnyNode,
+  type: 'FunctionExpression' | 'ClassExpression'
+): AnyNode => ({
+  ...decl,
+  type,
+  declare: undefined,
+});
 
 const getComponentExportName = (exportedName: string): string | null => {
   if (exportedName === 'default') {
@@ -124,7 +117,7 @@ export const transformRoute = (ast: ParseResult | AnyNode): void => {
 
   function getHocUid(hocName: string) {
     const uid = getUid(hocName);
-    hocs.push([hocName, uid]);
+    hocs.push([`UNSAFE_${hocName}`, uid]);
     return identifier(uid);
   }
 
@@ -132,9 +125,9 @@ export const transformRoute = (ast: ParseResult | AnyNode): void => {
     const uid = getHocUid(`with${name}Props`);
     const expression =
       declaration.type === 'FunctionDeclaration'
-        ? toFunctionExpression(declaration)
+        ? toExpression(declaration, 'FunctionExpression')
         : declaration.type === 'ClassDeclaration'
-          ? toClassExpression(declaration)
+          ? toExpression(declaration, 'ClassExpression')
           : declaration;
     return variableDeclaration(name, callExpression(uid, [expression]));
   }
@@ -166,9 +159,9 @@ export const transformRoute = (ast: ParseResult | AnyNode): void => {
       }
       const expression =
         declaration.type === 'FunctionDeclaration'
-          ? toFunctionExpression(declaration)
+          ? toExpression(declaration, 'FunctionExpression')
           : declaration.type === 'ClassDeclaration'
-            ? toClassExpression(declaration)
+            ? toExpression(declaration, 'ClassExpression')
             : declaration;
       statement.declaration = callExpression(uid, [expression]);
       continue;
@@ -301,7 +294,7 @@ export const transformRoute = (ast: ParseResult | AnyNode): void => {
       0,
       importDeclaration(
         hocs.map(([name, local]) => ({ imported: name, local })),
-        'virtual/react-router/with-props'
+        'react-router'
       )
     );
   }

package/src/route-export-pruning.ts

@@ -198,7 +198,7 @@ const isNonReferenceIdentifier = (node: AnyNode, parent: AnyNode | null) => {
 
 const isUppercaseName = (name: string): boolean => /^[A-Z]/.test(name);
 
-const collectReferencedNames = (node: AnyNode): Set<string> => {
+export const collectReferencedNames = (node: AnyNode): Set<string> => {
   const referenced = new Set<string>();
   walk(node as never, {
     Identifier(node, ctx) {
@@ -489,7 +489,8 @@ const hasRemovableExport = (
 export const removeExports = (
   ast: ParseResult | AnyNode,
   exportsToRemove: readonly string[],
-  exportsToRemoveSet: ReadonlySet<string> = new Set(exportsToRemove)
+  exportsToRemoveSet: ReadonlySet<string> = new Set(exportsToRemove),
+  options: { pruneDeadDeclarations?: boolean } = {}
 ): boolean => {
   const program = getProgram(ast);
   if (!hasRemovableExport(program, exportsToRemoveSet)) {
@@ -631,7 +632,7 @@ export const removeExports = (
     }
   }
 
-  if (exportsChanged) {
+  if (exportsChanged && options.pruneDeadDeclarations !== false) {
     removeNewlyDeadTopLevelDeclarations(
       program,
       declarationGraph,

package/src/route-imports.ts

@@ -0,0 +1,100 @@
+import type { Rspack } from '@rsbuild/core';
+import { resolve } from 'pathe';
+
+import { JS_EXTENSIONS, PLUGIN_NAME } from './constants.js';
+import type { Route } from './types.js';
+
+type QuerylessRouteImportPlugin = {
+  name: string;
+  apply(compiler: Rspack.Compiler): void;
+};
+
+const RSC_CLIENT_ROUTE_MODULE_QUERY_PREFIX = '?client-route-module=';
+const RSC_SHARED_CLIENT_ROUTE_MODULE_QUERY = '?client-route-module=shared';
+const RSC_SERVER_ROUTE_MODULE_QUERY = '?server-route-module=';
+const CLASSIC_CLIENT_ROUTE_MODULE_QUERY = '?react-router-route';
+
+const isRscClientRouteModuleIssuer = (issuer: string): boolean =>
+  issuer.includes(RSC_CLIENT_ROUTE_MODULE_QUERY_PREFIX);
+
+export const resolveQuerylessRouteImportRequest = ({
+  compilerName,
+  context,
+  issuer,
+  rsc = false,
+  request,
+  routeByFilePath,
+}: {
+  compilerName?: string;
+  context?: string;
+  issuer?: string;
+  rsc?: boolean;
+  request?: string;
+  routeByFilePath: ReadonlyMap<string, Route>;
+}): string | undefined => {
+  if (
+    typeof request !== 'string' ||
+    typeof context !== 'string' ||
+    typeof issuer !== 'string' ||
+    request.includes('?') ||
+    (!request.startsWith('.') && !request.startsWith('/'))
+  ) {
+    return;
+  }
+
+  const issuerPath = issuer.split('?')[0];
+  if (!routeByFilePath.has(issuerPath)) {
+    return;
+  }
+
+  const isRscClientIssuer = isRscClientRouteModuleIssuer(issuer);
+  const isWebCompiler = compilerName === 'web';
+  if (!rsc && !isWebCompiler && !isRscClientIssuer) {
+    return;
+  }
+
+  const candidate = resolve(context, request);
+  const routeFilePath = routeByFilePath.has(candidate)
+    ? candidate
+    : JS_EXTENSIONS.map(extension => `${candidate}${extension}`).find(
+        candidate => routeByFilePath.has(candidate)
+      );
+
+  if (!routeFilePath) {
+    return;
+  }
+
+  if (!rsc && isWebCompiler) {
+    return `${routeFilePath}${CLASSIC_CLIENT_ROUTE_MODULE_QUERY}`;
+  }
+
+  if (isWebCompiler || isRscClientIssuer) {
+    return `${routeFilePath}${RSC_SHARED_CLIENT_ROUTE_MODULE_QUERY}`;
+  }
+
+  return `${routeFilePath}${RSC_SERVER_ROUTE_MODULE_QUERY}`;
+};
+
+export const createQuerylessRouteImportPlugin = (
+  routeByFilePath: ReadonlyMap<string, Route>,
+  options: { rsc?: boolean } = {}
+): QuerylessRouteImportPlugin => ({
+  name: `${PLUGIN_NAME}:queryless-route-imports`,
+  apply(compiler: Rspack.Compiler) {
+    compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, factory => {
+      factory.hooks.beforeResolve.tap(PLUGIN_NAME, data => {
+        const resolvedRequest = resolveQuerylessRouteImportRequest({
+          compilerName: compiler.options?.name,
+          context: data?.context ?? data?.contextInfo?.issuer,
+          issuer: data?.contextInfo?.issuer,
+          rsc: options.rsc,
+          request: data?.request,
+          routeByFilePath,
+        });
+        if (resolvedRequest) {
+          data.request = resolvedRequest;
+        }
+      });
+    });
+  },
+});

package/src/route-transform-tasks.ts

@@ -310,6 +310,41 @@ const buildComponentRefreshRegistrations = (names: string[]): string => {
   return `\nif (typeof $RefreshReg$ === 'function') {\n${registrations}\n}\n`;
 };
 
+export const validateSpaModeRouteExports = ({
+  exportNames,
+  resourcePath,
+  rootRoutePath,
+}: {
+  exportNames: readonly string[];
+  resourcePath: string;
+  rootRoutePath: string | null;
+}): void => {
+  const isRootRoute = resourcePath === rootRoutePath;
+  const relativePath = relative(process.cwd(), resourcePath);
+  const invalidServerOnly = exportNames.filter(exp => {
+    if (isRootRoute && exp === 'loader') return false;
+    return SERVER_ONLY_ROUTE_EXPORTS_SET.has(exp);
+  });
+
+  if (invalidServerOnly.length > 0) {
+    const list = invalidServerOnly.map(exp => `\`${exp}\``).join(', ');
+    throw new Error(
+      `SPA Mode: ${invalidServerOnly.length} invalid route export(s) in ` +
+        `\`${relativePath}\`: ${list}. ` +
+        `See https://reactrouter.com/how-to/spa for more information.`
+    );
+  }
+
+  if (!isRootRoute && exportNames.includes('HydrateFallback')) {
+    throw new Error(
+      `SPA Mode: Invalid \`HydrateFallback\` export found in ` +
+        `\`${relativePath}\`. ` +
+        `\`HydrateFallback\` is only permitted on the root route in SPA Mode. ` +
+        `See https://reactrouter.com/how-to/spa for more information.`
+    );
+  }
+};
+
 const transformRouteModule = async (
   task: RouteModuleTransformTask
 ): Promise<RouteTransformResult> => {
@@ -325,32 +360,11 @@ const transformRouteModule = async (
 
   const ast = parse(code, { sourceType: 'module' });
   if (task.environmentName === 'web' && !task.ssr && task.isSpaMode) {
-    const resolvedExportNames = collectProgramExportNames(getProgram(ast));
-    const isRootRoute = task.resourcePath === task.rootRoutePath;
-    const relativePath = relative(process.cwd(), task.resourcePath);
-
-    const invalidServerOnly = resolvedExportNames.filter(exp => {
-      if (isRootRoute && exp === 'loader') return false;
-      return SERVER_ONLY_ROUTE_EXPORTS_SET.has(exp);
+    validateSpaModeRouteExports({
+      exportNames: collectProgramExportNames(getProgram(ast)),
+      resourcePath: task.resourcePath,
+      rootRoutePath: task.rootRoutePath,
     });
-
-    if (invalidServerOnly.length > 0) {
-      const list = invalidServerOnly.map(e => `\`${e}\``).join(', ');
-      throw new Error(
-        `SPA Mode: ${invalidServerOnly.length} invalid route export(s) in ` +
-          `\`${relativePath}\`: ${list}. ` +
-          `See https://reactrouter.com/how-to/spa for more information.`
-      );
-    }
-
-    if (!isRootRoute && resolvedExportNames.includes('HydrateFallback')) {
-      throw new Error(
-        `SPA Mode: Invalid \`HydrateFallback\` export found in ` +
-          `\`${relativePath}\`. ` +
-          `\`HydrateFallback\` is only permitted on the root route in SPA Mode. ` +
-          `See https://reactrouter.com/how-to/spa for more information.`
-      );
-    }
   }
 
   const removedServerOnlyExports =