@bleedingdev/modern-js-renderer-octane 3.9.3-ultramodern.7 → 3.9.3-ultramodern.9

package/src/index.ts

@@ -3,8 +3,8 @@ export type { OctaneDocumentBootstrap } from './bootstrap';
 
 export const OCTANE_RUNTIME_PROFILE = Object.freeze({
   renderer: 'octane',
-  runtime: '0.7.1+ultramodern.1331985ea3b0',
-  router: '0.1.60+ultramodern.0b9f76ee3003',
-  routerCore: '1.171.15',
-  history: '1.162.0',
+  runtime: '0.13.8',
+  router: '0.2.10',
+  routerCore: '1.171.34',
+  history: '1.162.4',
 });

package/src/manifest.ts

@@ -9,8 +9,8 @@ import {
   assertOctaneIdentity,
 } from './bootstrap';
 
-export const OCTANE_RUNTIME_VERSION = '0.7.1+ultramodern.1331985ea3b0';
-export const OCTANE_COMPILER_VERSION = '0.1.55';
+export const OCTANE_RUNTIME_VERSION = '0.13.8';
+export const OCTANE_COMPILER_VERSION = '0.2.4';
 
 export interface OctaneCompiledSource {
   readonly resource: string;

package/src/plugin/compiler-manifest.cjs

@@ -107,6 +107,29 @@ class OctaneCompilerManifestPlugin {
           sources.sort((left, right) =>
             left.resource.localeCompare(right.resource),
           );
+          // Module Federation publishes exposed native modules through a
+          // separate container entry in this same compilation. Its browser
+          // closure belongs to this application's publication, even when the
+          // document itself never imports an exposed component.
+          const containerChunks = new Set();
+          for (const [entryName, entry] of compilation.entries) {
+            if (
+              !entry.dependencies.some(
+                dependency => dependency.type === 'container entry',
+              )
+            )
+              continue;
+            const container = compilation.entrypoints.get(entryName);
+            if (!container)
+              throw new Error(
+                `Octane compiler has no federation container entry for ${entryName}.`,
+              );
+            for (const chunk of container.chunks) {
+              containerChunks.add(chunk);
+              for (const referenced of chunk.getAllReferencedChunks())
+                containerChunks.add(referenced);
+            }
+          }
           const identities = this.options.rendererIdentities();
           if (!identities || !Object.keys(identities).length) {
             throw new Error(
@@ -129,7 +152,10 @@ class OctaneCompilerManifestPlugin {
               throw new Error(
                 `Octane compiler has no client entry for ${entryName}.`,
               );
-            const entryChunks = new Set(entrypoint.chunks);
+            const entryChunks = new Set([
+              ...entrypoint.chunks,
+              ...containerChunks,
+            ]);
             for (const chunk of entrypoint.chunks) {
               for (const referenced of chunk.getAllReferencedChunks())
                 entryChunks.add(referenced);

package/src/plugin/compiler.ts

@@ -41,10 +41,15 @@ export function createOctaneCompilerPlugin(
       } = require('./compiler-manifest.cjs');
       // The application installs the Octane compiler; resolve it lazily so
       // descriptor readers never load it.
+      const appRequire = createRequire(
+        path.join(api.context.rootPath, 'package.json'),
+      );
       const {
         inferRspackEnvironment,
         OctaneRspackPlugin,
-      }: typeof import('@octanejs/rspack-plugin') = require('@octanejs/rspack-plugin');
+      }: typeof import('@octanejs/rspack-plugin') = appRequire(
+        '@octanejs/rspack-plugin',
+      );
       api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) =>
         mergeRsbuildConfig(config, {
           source: {
@@ -60,19 +65,6 @@ export function createOctaneCompilerPlugin(
           rsbuildEnvironment.name === options.workerEnvironmentName
             ? 'server'
             : inferRspackEnvironment(config.target);
-        // Octane prepends '.tsrx' only when it is absent. Keep TypeScript
-        // modules first so an extensionless './link' cannot select a
-        // case-colliding Link.tsrx on case-insensitive file systems.
-        config.resolve ??= {};
-        const extensions = (config.resolve.extensions ?? []).filter(
-          extension => extension !== '.tsrx',
-        );
-        extensions.splice(
-          Math.max(extensions.indexOf('.ts'), extensions.indexOf('.tsx')) + 1,
-          0,
-          '.tsrx',
-        );
-        config.resolve.extensions = extensions;
         config.plugins ??= [];
         config.plugins.push(
           new OctaneRspackPlugin({

package/src/plugin/index.ts

@@ -81,7 +81,7 @@ export const rendererAdapter: NativeRendererAdapter<'octane'> =
     artifacts: compilerArtifacts,
     assertSupportedSource: assertOctaneEntrySource,
     create: {
-      templates: { federation: true, workers: false },
+      templates: { federation: true, workers: true },
       dependencies: (profile, { typescriptVersion }) => ({
         frameworkDependencies: [
           '@modern-js/renderer-core',
@@ -89,7 +89,9 @@ export const rendererAdapter: NativeRendererAdapter<'octane'> =
         ],
         dependencies: nativeRendererDependencies(profile),
         devDependencies: {
-          [profile.compiler.name]: profile.compiler.version,
+          [profile.compiler.name]:
+            profile.dependencies[profile.compiler.name] ??
+            profile.compiler.version,
           typescript: typescriptVersion,
         },
         typecheckCommand: 'octane-tsc --noEmit --project tsconfig.json',

package/src/plugin/profile.ts

@@ -4,7 +4,7 @@ export const octaneProfile: RendererBuildProfile<'octane'> = {
   renderer: 'octane',
   status: 'preview',
   protocolVersion: 1,
-  minimumNode: '26.10.0',
+  minimumNode: '26.12.0',
   hmr: {
     editedBoundary: 'may-reset',
     unaffectedComponents: 'preserved',
@@ -12,28 +12,32 @@ export const octaneProfile: RendererBuildProfile<'octane'> = {
     roots: 'single',
     cleanup: 'exactly-once',
   },
-  compiler: { name: '@octanejs/rspack-plugin', version: '0.1.55' },
+  compiler: { name: '@octanejs/rspack-plugin', version: '0.2.4' },
   hydration: {
     name: 'octane',
-    version: '0.7.1+ultramodern.1331985ea3b0',
+    version: '0.13.8',
   },
   router: {
     name: '@octanejs/tanstack-router',
-    version: '0.1.60+ultramodern.0b9f76ee3003',
+    version: '0.2.10',
     coreName: '@tanstack/router-core',
-    coreVersion: '1.171.15',
+    coreVersion: '1.171.38',
   },
   sourceExtensions: ['.tsx', '.tsrx', '.ts', '.js'],
   jsxImportSource: 'octane',
   dependencies: {
+    '@tsrx/oxc': '0.20.0',
     octane:
-      'https://github.com/bleedingdev/octane/releases/download/octane%400.7.1%2Bultramodern.1331985ea3b0/octane-0.7.1%2Bultramodern.1331985ea3b0.tgz',
+      'https://github.com/BleedingDev/octane/releases/download/ultramodern-octane-0bf2313bbdfb/octane-0.13.8.tgz',
     '@octanejs/tanstack-router':
-      'https://github.com/bleedingdev/octane/releases/download/%40octanejs%2Ftanstack-router%400.1.60%2Bultramodern.0b9f76ee3003/octanejs-tanstack-router-0.1.60%2Bultramodern.0b9f76ee3003.tgz',
-    '@octanejs/rspack-plugin': '0.1.55',
+      'https://github.com/BleedingDev/octane/releases/download/ultramodern-octane-0bf2313bbdfb/octanejs-tanstack-router-0.2.10.tgz',
+    '@octanejs/rspack-plugin':
+      'https://github.com/BleedingDev/octane/releases/download/ultramodern-octane-0bf2313bbdfb/octanejs-rspack-plugin-0.2.4.tgz',
+    '@tanstack/router-core':
+      'https://github.com/BleedingDev/router/releases/download/ultramodern-router-core-585d3233f7f5/tanstack-router-core-1.171.38.tgz',
     '@modern-js/renderer-octane': '3.8.3',
-    seroval: '1.6.8',
-    'seroval-plugins': '1.6.8',
+    seroval: '1.6.9',
+    'seroval-plugins': '1.6.9',
   },
   capabilities: {
     worker: true,

package/src/router-client.ts

@@ -64,7 +64,7 @@ function waitForCommittedMatches(
   signal?: AbortSignal,
 ): Promise<void> {
   signal?.throwIfAborted();
-  const matchesId = router.stores.matchesId;
+  const matchesId = router.stores.ids;
   if (matchesId.get().length > 0) return Promise.resolve();
   if (!isReactiveMatchIds(matchesId)) {
     throw new Error(

package/src/router-external-snapshot.ts

@@ -0,0 +1,306 @@
+import type { LocalisedUrlsOption } from '@modern-js/i18n-runtime-extensions/paths';
+import {
+  type AnyRouter,
+  assertDefaultRouterRenderHost,
+  associateRouterRenderProfile,
+  captureRouterRenderSnapshot,
+  createRouterRenderRouteTree,
+  defaultParseSearch,
+  defaultStringifySearch,
+  disposeRouterRenderSnapshot,
+  getRouterRenderProfile,
+  matchContext,
+  type RouterRenderJsonRecord,
+  type RouterRenderSnapshot,
+  registerRouterRenderProfile,
+  restoreRouterRenderSnapshot,
+  routerContext,
+} from '@octanejs/tanstack-router';
+import {
+  getOctaneWorkerRouterRewrite,
+  OCTANE_WORKER_CONTEXT_KEYS,
+  registerOctaneWorkerContext,
+} from './worker-federation-contexts';
+
+export const OCTANE_FILE_ROUTE_SNAPSHOT_PROFILE = Object.freeze({
+  key: 'ultramodern.file-routes',
+  version: '1',
+});
+
+interface GeneratedRouterOrigin {
+  readonly publicContext: RouterRenderJsonRecord;
+  readonly rewrite: AnyRouter['options']['rewrite'];
+}
+const origins = new WeakMap<AnyRouter, GeneratedRouterOrigin>();
+let profileRegistered = false;
+
+function plainRecord(value: unknown): value is Record<string, unknown> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    [Object.prototype, null].includes(Object.getPrototypeOf(value))
+  );
+}
+
+function record(
+  value: unknown,
+  fields?: readonly string[],
+): Record<string, unknown> {
+  if (!plainRecord(value))
+    throw new TypeError('Worker router context requires a plain record');
+  for (const key of Reflect.ownKeys(value)) {
+    const descriptor = Object.getOwnPropertyDescriptor(value, key);
+    if (
+      typeof key !== 'string' ||
+      (fields && !fields.includes(key)) ||
+      !descriptor ||
+      !descriptor.enumerable ||
+      !('value' in descriptor)
+    )
+      throw new TypeError('Unknown Worker router context field or accessor');
+  }
+  return value;
+}
+
+function nonempty(value: unknown): string {
+  if (typeof value !== 'string' || !value.trim() || value.length > 1024)
+    throw new TypeError('Invalid Worker router identity');
+  return value;
+}
+
+/** Only the host entry's public logical identity crosses the Worker boundary. */
+function publicContext(value: unknown): RouterRenderJsonRecord {
+  const context = record(value, ['ultramodern']);
+  const metadata = record(context.ultramodern, ['rendererIdentity']);
+  const identity = record(metadata.rendererIdentity, [
+    'renderer',
+    'appId',
+    'entryName',
+    'protocolVersion',
+    'buildId',
+  ]);
+  if (identity.renderer !== 'octane' || identity.protocolVersion !== 1)
+    throw new TypeError('Unsupported Worker router identity');
+  return Object.freeze({
+    ultramodern: Object.freeze({
+      rendererIdentity: Object.freeze({
+        renderer: 'octane',
+        appId: nonempty(identity.appId),
+        entryName: nonempty(identity.entryName),
+        protocolVersion: 1,
+        buildId: nonempty(identity.buildId),
+      }),
+    }),
+  });
+}
+
+function localizedUrls(value: unknown): LocalisedUrlsOption | undefined {
+  if (value === undefined || typeof value === 'boolean') return value;
+  const input = record(value);
+  const result: Exclude<LocalisedUrlsOption, boolean> = {};
+  for (const [path, translations] of Object.entries(input)) {
+    const names: Record<string, string> = {};
+    for (const [language, target] of Object.entries(record(translations)))
+      names[nonempty(language)] = nonempty(target);
+    result[path] = names;
+  }
+  return result;
+}
+
+function rewriteDescriptor(value: unknown):
+  | {
+      readonly language: string;
+      readonly languages: readonly string[];
+      readonly localisedUrls?: LocalisedUrlsOption;
+    }
+  | undefined {
+  if (value === undefined) return undefined;
+  const input = record(value, ['language', 'languages', 'localisedUrls']);
+  if (
+    !Array.isArray(input.languages) ||
+    !input.languages.length ||
+    input.languages.length > 64
+  )
+    throw new TypeError('Invalid Worker router i18n languages');
+  const languages = input.languages.map(nonempty);
+  const language = nonempty(input.language);
+  if (
+    new Set(languages).size !== languages.length ||
+    !languages.includes(language)
+  )
+    throw new TypeError('Invalid Worker router i18n language');
+  const urls = localizedUrls(input.localisedUrls);
+  return {
+    language,
+    languages,
+    ...(urls === undefined ? {} : { localisedUrls: urls }),
+  };
+}
+
+function nativeRewriteDescriptor(
+  router: AnyRouter,
+): RouterRenderJsonRecord | undefined {
+  if (!router.options.rewrite) return undefined;
+  const known = getOctaneWorkerRouterRewrite()?.capture(router.options.rewrite);
+  if (!known)
+    throw new TypeError(
+      'Custom router rewrite requires an exact Worker profile',
+    );
+  const descriptor = rewriteDescriptor(known);
+  if (!descriptor)
+    throw new TypeError('Missing native router rewrite provenance');
+  return {
+    language: descriptor.language,
+    languages: [...descriptor.languages],
+    ...(descriptor.localisedUrls === undefined
+      ? {}
+      : { localisedUrls: descriptor.localisedUrls }),
+  };
+}
+
+function validateDefaultSnapshot(snapshot: RouterRenderSnapshot): void {
+  publicContext(snapshot.publicContext);
+  rewriteDescriptor(snapshot.i18n);
+}
+
+function ensureDefaultProfile(): void {
+  if (profileRegistered) return;
+  registerRouterRenderProfile({
+    id: OCTANE_FILE_ROUTE_SNAPSHOT_PROFILE,
+    assertHost: (router, snapshot) => {
+      const origin = origins.get(router);
+      if (
+        !origin ||
+        origin.rewrite !== router.options.rewrite ||
+        JSON.stringify(publicContext(router.options.context)) !==
+          JSON.stringify(origin.publicContext)
+      )
+        throw new TypeError('Generated Worker router origin changed');
+      assertDefaultRouterRenderHost(router, snapshot.i18n !== undefined);
+      validateDefaultSnapshot(snapshot);
+      if (
+        JSON.stringify(nativeRewriteDescriptor(router)) !==
+        JSON.stringify(snapshot.i18n)
+      )
+        throw new TypeError(
+          'Worker router rewrite differs from its native provenance',
+        );
+    },
+    createRoutingTree: snapshot => {
+      validateDefaultSnapshot(snapshot);
+      return createRouterRenderRouteTree(snapshot.routes);
+    },
+    routingOptions: snapshot => {
+      const defaults = {
+        parseSearch: defaultParseSearch,
+        stringifySearch: defaultStringifySearch,
+      };
+      const i18n = rewriteDescriptor(snapshot.i18n);
+      if (!i18n) return defaults;
+      const codec = getOctaneWorkerRouterRewrite();
+      if (!codec)
+        throw new TypeError('Missing owning Worker router i18n codec');
+      return { ...defaults, rewrite: codec.restore(i18n) };
+    },
+  });
+  profileRegistered = true;
+}
+
+/** Associate the genuine router produced by the generated file-route factory. */
+export function associateOctaneFileRouteSnapshot(router: AnyRouter): void {
+  ensureDefaultProfile();
+  const context = publicContext(router.options.context);
+  origins.set(router, {
+    publicContext: context,
+    rewrite: router.options.rewrite,
+  });
+  associateRouterRenderProfile(router, {
+    id: OCTANE_FILE_ROUTE_SNAPSHOT_PROFILE,
+    publicContext: context,
+  });
+}
+
+export function captureOctaneRouterSnapshot(
+  router: AnyRouter,
+): RouterRenderSnapshot {
+  const origin = origins.get(router);
+  const declared = getRouterRenderProfile(router);
+  if (
+    origin &&
+    declared?.key === OCTANE_FILE_ROUTE_SNAPSHOT_PROFILE.key &&
+    declared.version === OCTANE_FILE_ROUTE_SNAPSHOT_PROFILE.version
+  ) {
+    const i18n = nativeRewriteDescriptor(router);
+    associateRouterRenderProfile(router, {
+      id: OCTANE_FILE_ROUTE_SNAPSHOT_PROFILE,
+      publicContext: origin.publicContext,
+      ...(i18n === undefined ? {} : { i18n }),
+    });
+  }
+  return captureRouterRenderSnapshot(router);
+}
+
+let registrations = 0;
+let releaseContexts: (() => void) | undefined;
+
+/** Startup registration uses the actual physical native router/match Contexts. */
+export function registerOctaneRouterWorkerContexts(): () => void {
+  ensureDefaultProfile();
+  if (!releaseContexts) {
+    const releaseRouter = registerOctaneWorkerContext(routerContext, {
+      key: OCTANE_WORKER_CONTEXT_KEYS.router,
+      encode: value => {
+        if (!value) throw new TypeError('Missing native router provider');
+        return captureOctaneRouterSnapshot(value);
+      },
+      decode: (value, signal) => restoreRouterRenderSnapshot(value, { signal }),
+      dispose: value => {
+        if (value) disposeRouterRenderSnapshot(value);
+      },
+      isProvided: value => value !== undefined,
+    });
+    try {
+      const releaseMatch = registerOctaneWorkerContext(matchContext, {
+        key: OCTANE_WORKER_CONTEXT_KEYS.match,
+        encode: nonempty,
+        decode: nonempty,
+        validate: (value, readContext) => {
+          const selected = readContext(routerContext);
+          const router = selected.present ? selected.value : undefined;
+          // Native Match and useMatch share the active route store key, not
+          // the location-specific match identity (which includes parameters).
+          const current = router?.state.matches.find(
+            match => match.routeId === value,
+          );
+          if (
+            !router ||
+            !current ||
+            typeof value !== 'string' ||
+            router.stores.getMatchStore(value).get() !== current
+          )
+            throw new TypeError(
+              'Worker match context requires its selected native router and a current match',
+            );
+        },
+        isProvided: value => value !== undefined,
+      });
+      releaseContexts = () => {
+        releaseMatch();
+        releaseRouter();
+      };
+    } catch (error) {
+      releaseRouter();
+      throw error;
+    }
+  }
+  registrations++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--registrations === 0) {
+      releaseContexts?.();
+      releaseContexts = undefined;
+    }
+  };
+}

package/src/router-handler.ts

@@ -91,8 +91,9 @@ function requestHeaders(router: AnyRouter): Headers {
       );
     appendHeaders(headers, field?.value);
   }
-  const redirect = router.stores.redirect.get();
-  if (redirect) appendHeaders(headers, redirect.headers);
+  const result = router._serverResult;
+  if (result?.type === 'redirect')
+    appendHeaders(headers, result.redirect.headers);
   return headers;
 }
 
@@ -117,7 +118,6 @@ export function createOctaneRequestHandler<TRouter extends AnyRouter>({
         ...serialization,
         forbiddenValues: [request, ...(serialization?.forbiddenValues ?? [])],
       });
-      session.registerCleanup(() => router.cancelMatches());
 
       const { url } = getNormalizedURL(request.url, 'http://localhost');
       const href = url.href.replace(url.origin, '');
@@ -126,14 +126,14 @@ export function createOctaneRequestHandler<TRouter extends AnyRouter>({
         history: createMemoryHistory({ initialEntries: [href] }),
         origin: router.options.origin ?? getOrigin(request),
       });
-      await withAbort(router.load(), session.signal);
+      await withAbort(router.load({ _signal: session.signal }), session.signal);
       guard.assertActive();
 
       // A native redirect is a terminal HTTP Response. It must never enter
       // the public serializer as a match error or document payload.
-      const redirect = router.stores.redirect.get();
-      if (redirect) {
-        const resolved = router.resolveRedirect(redirect);
+      const loadResult = router._serverResult;
+      if (loadResult?.type === 'redirect') {
+        const resolved = loadResult.redirect;
         const headers = requestHeaders(router);
         return new Response(null, {
           status: resolved.status,
@@ -146,7 +146,10 @@ export function createOctaneRequestHandler<TRouter extends AnyRouter>({
       const serverSsr = router.serverSsr;
       if (!serverSsr)
         throw new Error('Native Octane router SSR state is required');
-      await withAbort(serverSsr.dehydrate(), session.signal);
+      await withAbort(
+        serverSsr.dehydrate({ signal: session.signal }),
+        session.signal,
+      );
       guard.assertActive();
       const responseHeaders = requestHeaders(router);
       // A callback that ignores cancellation must not hold the router SSR

package/src/router-server.ts

@@ -5,8 +5,6 @@ import { createElement, type ServerRenderNode } from 'octane/server';
 export * from '@octanejs/tanstack-router/ssr/server';
 export type { OctaneRequestHandlerOptions } from './router-handler';
 export { createOctaneRequestHandler } from './router-handler';
-export type { OctaneRouterInjectionOptions } from './router-injection';
-export { createOctaneRouterInjection } from './router-injection';
 export type {
   OctaneRouterSerializationGuard,
   OctaneRouterSerializationOptions,

package/src/router.ts

@@ -9,7 +9,7 @@ import {
   useMatch,
   useRouter,
 } from '@octanejs/tanstack-router';
-import { createSubSlot, useCallback, useEffect, useRef } from 'octane';
+import { createSubSlot, useCallback, useLayoutEffect, useRef } from 'octane';
 import { assertOctaneIdentity } from './bootstrap';
 import { resolveRouteData } from './routes';
 
@@ -161,7 +161,7 @@ export function useOctaneRouteAction(...args: unknown[]) {
   const identity = useApplicationIdentity();
   const routeId = useApplicationRouteId();
   const owner = useRef<AbortController | null>(null, actionSlot(slot, 'owner'));
-  useEffect(
+  useLayoutEffect(
     () => {
       const controller = new AbortController();
       owner.current = controller;

package/src/routes.ts

@@ -59,7 +59,7 @@ export function resolveRouteData(
 }
 
 interface ReactiveNativeMatch {
-  get(): AnyRouteMatch;
+  get(): AnyRouteMatch | undefined;
   subscribe(callback: () => void): { unsubscribe(): void };
 }
 
@@ -75,24 +75,18 @@ function isReactiveNativeMatch(value: unknown): value is ReactiveNativeMatch {
 /** A transport failure belongs to the native generation that fetched it. */
 function observeRouteCompletion(
   router: AnyRouter,
+  routeId: string,
   controller: AbortController,
   signal: AbortSignal,
   completion: Promise<void>,
 ) {
   void completion.catch(error => {
     if (signal.aborted) return;
-    const match = [
-      ...router.stores.pendingMatches.get(),
-      ...router.stores.matches.get(),
-      ...router.stores.cachedMatches.get(),
-    ].find(candidate => candidate.abortController === controller);
-    if (!match) return;
-    const store = [
-      router.stores.pendingMatchStores.get(match.id),
-      router.stores.matchStores.get(match.id),
-      router.stores.cachedMatchStores.get(match.id),
-    ].find(candidate => candidate?.get().abortController === controller);
-    if (!store) return;
+    const route = Object.values(router.routesById).find(
+      candidate => candidate.options.staticData?.ultramodernRouteId === routeId,
+    );
+    if (!route) return;
+    const store = router.stores.getMatchStore(route.id);
     let subscription: { unsubscribe(): void } | undefined;
     let settled = false;
     const cleanup = () => {
@@ -103,9 +97,10 @@ function observeRouteCompletion(
       settled = true;
       cleanup();
     };
-    const publish = () => {
+    const publish = async () => {
       if (settled) return;
       const current = store.get();
+      if (!current) return;
       if (
         current.abortController !== controller ||
         signal.aborted ||
@@ -121,23 +116,29 @@ function observeRouteCompletion(
       const route = router.routesById[current.routeId];
       let failure = error;
       try {
+        await route?.options.errorComponent?.preload?.();
+        if (signal.aborted || store.get()?.abortController !== controller)
+          return;
         route?.options.onError?.(failure);
       } catch (onErrorFailure) {
         failure = onErrorFailure;
       }
-      // Native successful loads have already preloaded their route components.
+      // The error component is ready before publishing a late transport failure.
       if (signal.aborted) return;
-      router.updateMatch(match.id, previous =>
-        previous.abortController === controller &&
-        previous.status === 'success' &&
-        !previous.isFetching
-          ? {
-              ...previous,
-              error: failure,
-              status: 'error',
-              isFetching: false,
-            }
-          : previous,
+      router.stores.setMatches(
+        router.stores.matches.get().map(previous =>
+          previous.routeId === route.id &&
+          previous.abortController === controller &&
+          previous.status === 'success' &&
+          !previous.isFetching
+            ? {
+                ...previous,
+                error: failure,
+                status: 'error',
+                isFetching: false,
+              }
+            : previous,
+        ),
       );
     };
     signal.addEventListener('abort', onAbort, { once: true });
@@ -203,6 +204,7 @@ export function createFileSystemRouteTree<Context = unknown>(
                 if (failed) throw failure;
                 observeRouteCompletion(
                   router,
+                  route.id,
                   match.abortController,
                   signal,
                   outcome.completion,