fix(sync): a route rendering a same-file lazy value follows its module, and a new component gets its JSX edges

[colbymchenry]

codegraph sync and the file watcher left a React Router route on a stale answer when the router file loads the page lazily into a value of its own and the page's module changes after the router was indexed. A sync that added a component with no JSX of its own also never drew the JSX edges to it. A fresh index of the same files gets both right.

Repro

package.json depends on react and react-router-dom, and src/App.tsx is:

import { lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Team = lazy(() => import('./pages/Team'));
const Docs = lazy(() => import('./pages/Docs'));
export function App() { return (<BrowserRouter><Routes><Route path="/team" element={<Team />} /><Route path="/docs" element={<Docs />} /></Routes></BrowserRouter>); }

Index it without src/pages/, then add src/pages/Team.tsx (export default function Team() { return null; }) and src/pages/Docs.tsx (export default function DocsPage() { return null; }), and run codegraph sync. Compared with a fresh index of the same files in another folder:

• /docs stays on constant Docs (exact-match). A fresh index binds it to function DocsPage (framework).
• App → Team (jsx-render) is missing.

/team converges only by luck: CG-33's rebind re-opens edges by the target's name, and the page's component is named Team like the declaration.

Cause

The route. A route that renders a same-file lazy value binds, through declaredComponent (#2400), to the component that value's module exports. While the module is missing or exports none, it binds to the declaration instead. The reference resolved either way, so:

• it was never parked for the failed-ref retry (Incremental sync misses cross-file relations after a new export is added #1240), and
• the rebind of the names a sync defines (CG-33) only reaches it when the module's component shares the declaration's name.

The same staleness follows an edit that gives the module its default export, or moves it to another component while the old one stays: the route's edge follows its old target through the module's re-index. That last case also holds for a data router's lazy: () => import('./x') route.

The JSX edge. jsx-render edges are redrawn only when a changed file passes the synthesis content gate (hasSynthesisPattern), or had synthesized edges touching it. A new component file with no markup of its own (return null, a wrapper, a styled component in a .ts file) passes neither, so <Team /> in an unchanged file never got its edge. This half isn't specific to lazy routes: a statically imported <Team /> behaves the same.

Fix

A new FrameworkResolver.lazyModules(ref, context) hook. It returns the modules whose content resolve() reads to answer a route's reference. React implements it for:

• lazy-import: references, plain or behind layout:;
• the references Pattern 1 asks declaredComponent about. Those are a route's PascalCase component in a .tsx/.jsx route file, which its own file declares as a lazy value.

The list includes every file #2436's barrel walk passes through on the way to the component: the walk (exportedComponent) now records what it reads. declaredComponent's loader reading moved into declaredLoader, and the module path into lazyModuleFile, so the hook and resolution read the same files.

ReferenceResolver.reopenRouteModuleReaders(changedFilePaths). Sync calls it right after CG-33's rebind, so the orphan sweep resolves what it puts back.

• It loads the route edges a change can move (getRouteEdgesMovedBy): edges from a route in an unchanged file whose target is either a node of a changed file or a constant or variable beside the route. They come back in the order they were written.
• For each one whose lazyModules include a changed file, it turns the edge back into the reference that made it, as the rebind does.
• Edges with no refName stamp and synthesized edges are never touched.

A synthesis refresh for a new component. After the store phase, a sync whose definition delta includes a JSX-renderable node in a changed script also refreshes synthesis. That means a component, function or class with a tag's capital, or any component (isJsxChildCandidate, next to jsxChild).

• Removing one needs no check: a component a tag rendered had synthesized edges into its file, which the existing gate already sees.
• A body-only edit has an empty delta, and a new lowercase function or a PascalCase constant doesn't count.

Validation

main moved four times while this was validated:

• e0bbb66;
• ed199e6 (fix(sync): a route links the module it lazily loads when the module appears later #2422, fix(sync): a navigation call links its route when the route appears later #2425, fix(react-router): a JSX index route is the page at its parent's address, inside the layout around it #2423, fix(frameworks): a framework resolves only references written in its own languages #2415, fix(js,ts): import { default as X } is the module's default import #2412 and others);
• 883504d (fix(react): a type argument or a name the component binds itself renders no JSX child #2442, fix(go): a call on an embedded struct's method does not reach the embedder's method of that name #2430);
• 16344af (fix(react-router): a lazy route links the page a barrel module forwards #2436, plus perf(resolution): read a bare-recorded call's receiver on its own line first — graph byte-identical #2431, fix(js,ts): require('./x').default reaches an ES module's default export #2433, fix(c,cpp): a file named like a Google unittest, foo_unittest.cc, is a test #2434, fix(js,ts): a catch-all or node_modules path alias no longer makes package imports look local #2437, fix(go): a defined type links the types it is defined from #2441, fix(go): a call through a type assertion reaches the asserted type's method #2444, fix(go): a dotted call is written through its own receiver, and a local named like an import is that variable #2448, fix(cpp): a class keeps its members past attribute macros the parser can't read #2449).

Each step below names its base. The convergence checks were repeated on each base.

Tests. __tests__/sync-lazy-route-value.test.ts has 12 tests. Each sync is compared, whole graph and edge metadata included, with a fresh index in a separate folder. The cases:

• modules added after the router, as a full sync and as the watcher's scoped sync;
• an edit gives the module its default export;
• the default export moves to another component;
• deleted modules come back;
• a page behind an unchanged barrel (fix(react-router): a lazy route links the page a barrel module forwards #2436) is added, then switches its default export;
• codedthemes' Loadable(lazy(() => import(…))) in a route table another file hands the router;
• a data router's lazy route whose module switches its default export;
• a component added without markup, rendered through an import and by name alone.

Two guards: a sync of an unrelated file re-opens nothing, and a new PascalCase constant or lowercase function doesn't refresh synthesis.

Red phase.

• Against main (e0bbb66, and again on ed199e6), 10 of the first 11 fail. One of the 10 fails only because it spies on the new method. The precision guard passes on both.
• The barrel case was added once fix(react-router): a lazy route links the page a barrel module forwards #2436 landed. It failed against this branch's first, single-module hook.

Each half has teeth. With the re-open disabled, the 6 route-convergence cases fail. With the synthesis trigger disabled, the 2 JSX cases fail, plus the 2 route cases that also check App → Team.

On the final merge (16344af): tsc is clean, and these pass:

• the 12 tests here;
• fix(react-router): a lazy route links the page a barrel module forwards #2436's barrel tests (9) and react-router-nested-lazy (3; its beforeAll timed out once under load and passed alone);
• the JS import tests fix(js,ts): require('./x').default reaches an ES module's default export #2433, fix(js,ts): a catch-all or node_modules path alias no longer makes package imports look local #2437 and perf(resolution): read a bare-recorded call's receiver on its own line first — graph byte-identical #2431 added, which the merge script runs before pushing.

The scenario matrix and the CLI repro converge.

On 883504d:

• tsc is clean.
• The last round's files pass, 220 tests: this PR's; fix(react): a type argument or a name the component binds itself renders no JSX child #2442's JSX tests (jsx-child-disambiguation, jsx-render-work); fix(sync): a route links the module it lazily loads when the module appears later #2422's and fix(sync): a navigation call links its route when the route appears later #2425's sync retries; sync; sync-rebuild-convergence; React Router; HOC components; and fix(go): a call on an embedded struct's method does not reach the embedder's method of that name #2430's Go test.
• The round before (ed199e6) ran 26 related files: 504 tests, all passing. They cover sync and its retries, cli-sync, every router, JSX disambiguation, import-default-as, the framework language gate and frameworks-integration.

Full suite. One full-suite run was made, on e0bbb66 plus this fix. This box was saturated (100% CPU, about 106 node processes from other sessions), and 721 of 6,534 tests failed:

• 715 were timeouts.
• The other 6 were assertions in the daemon and watcher lifecycle files.
• Rerun serially on the final merge, mcp-daemon passes 22/22. In mcp-projectpath-lifecycle and mcp-staleness-banner, the one test each that failed then passes when run alone.

Kernel path (e0bbb66 plus this fix; the TS walker hasn't changed since). The kernel was built and loaded for TS/TSX. The new tests, a 6-scenario sync-vs-fresh matrix and the CLI repro above all converge.

Scenario matrix and CLI repro. Rerun on all three bases with wasm builds: main diverges in all 6 scenarios and the repro, and this branch converges in all of them.

Full-index A/B (init -y, scripts/dump-graph.mjs, on e0bbb66 and again on ed199e6):

• 13 repos are byte-identical: matx, berry, mantis, material-kit-react, bulletproof-react, proshop, next-saas-starter, create-t3-turbo, outline, infrahub's frontend, luci's milo UI, folo and excalidraw.
• material-kit-react is also identical on 883504d.
• That is expected: the change only acts during a sync.

Late-module scenario. Every module a route reaches through a same-file lazy value was held out, the rest indexed, the files restored and codegraph sync run. Lines differing from a fresh index:

repo	modules held out	main	this branch
minimal-ui-kit/material-kit-react	6	14	0
uilibrary/matx-react	4	0	0
outline/outline	2	0	0

• material-kit-react goes from 14 to 0 on all three bases.
• On main, its seven routes (/, /user, /products, /blog, /sign-in, /404, /*) stay on their UserPage-style declarations, while each module exports Page.
• matx's and outline's components share their declaration's name, so CG-33's rebind already caught them.
• berry and mantis load their pages through jsconfig baseUrl paths that codegraph doesn't resolve, so their routes bind to the declarations on a fresh index too.

Generic late scenario (e0bbb66). Every 7th script file was held out, then the same restore and sync, on 11 repos. On every repo the fix's drift lines are a subset of main's:

• material-kit-react goes from 10 to 8 differing lines: /sign-in converges.
• The other 10 drift identically in both arms. That drift is pre-existing and unrelated. On excalidraw, for example, it is 3,976 edges that resolved by name instead of through their import, plus 1,671 references still unresolved after the sync.

Cost.

• sync-route-modules takes 0–7 ms per sync on these repos. The query walks route edges: 4 ms on outline's 1,215, 0.1 ms on vscode's index.
• The new synthesis trigger can only fire from files that declare a renderable component but match no content pattern. That is 0–2 files on most of the React repos, 34 on folo, 61 on outline (mostly styled components in .ts files) and 14 of vscode's 15,358. Even then it fires only when such a file gains or renames a component.

Overlap

• fix(react): a component a file declares itself as a value is what its JSX renders #2420 (open) rewrites declaredComponent: more loader shapes, wrapped functions, a module that forwards its component, and resolution in the importing file's language first. It also applies the rule beyond route refs: every Pattern 1 ref from a .tsx/.jsx file, layouts and jsx-render. Whichever lands second should:
  • read the loader through declaredLoader and the module path through lazyModuleFile, so lazyModules and resolution keep agreeing;
  • widen lazyModules' route condition to Pattern 1's and include layout:<Name>;
  • have a sync that re-opens a lazy value's route also refresh synthesis, because fix(react): a component a file declares itself as a value is what its JSX renders #2420's jsx-render reads the same module. This PR's delta trigger covers a module that gains a component, but not an edit that only moves its default export.
• fix(react-router): a lazy route links the page a barrel module forwards #2436 (merged as 16344af) lets lazyRouteComponent follow barrels (export * from, export { default } from) for up to 4 hops. This PR landed second and makes lazyModules name every file that walk reads, so the barrel test above converges.
  • fix(react): a component a file declares itself as a value is what its JSX renders #2420's forwarding index should feed the same list when it lands.
  • A failed lazy-import: reference behind two barrels is fix(sync): a route links the module it lazily loads when the module appears later #2422's retry path, not this one. It is fix(react-router): a lazy route links the page a barrel module forwards #2436's open follow-up ("relink a page two barrels deep behind a lazy route"), which can reuse lazyModules.
• fix(react): a type argument or a name the component binds itself renders no JSX child #2442 (merged as 4731149) changed which names jsx-render reads as tags. It left jsxChild's candidate kinds alone, so isJsxChildCandidate still mirrors them, and its tests pass on the merge.
• fix(sync): a route links the module it lazily loads when the module appears later #2422 (merged as 388b252) retries failed lazy route references by module: tails. This PR re-opens resolved ones, so the two cover different rows. Its sync changes merged without conflict.
• fix(sync): a navigation call links its route when the route appears later #2425 (merged as d348d30) added the navigation hook beside this one, plus trap 16; fix(react-router): a JSX index route is the page at its parent's address, inside the layout around it #2423 and fix(frameworks): a framework resolves only references written in its own languages #2415 added traps 14 and 15. The types.ts and trap-list conflicts resolved as keep-both, so this PR's trap is 17.
• The "JSX usage refs to same-file lazy values" task from fix(react-router): read route tables another file hands the router #2400 became fix(react): a component a file declares itself as a value is what its JSX renders #2420. This PR is the separate sync item fix(sync): a route links the module it lazily loads when the module appears later #2422 listed under "Not in this PR".

Not in this PR

• A lazy value whose import path now resolves to a different file than before (./pages/Docs from Docs/index.tsx to a new Docs.tsx). The route's edge points into the old, unchanged file, so it isn't a candidate.

🤖 Generated with Claude Code