Next.Js Dev: RangeError Maximum Call Stack Size Exceeded On First Deep Route With CacheComponents

The overflow originates from a recursive render path in React Flight when resolving a client component reference under a deep server component tree. With cacheComponents, the component chunk caching strategy leads to an unexpectedly deep (or re-entrant) call stack at exactly 8 segments on Node 20's default stack limit; the cache for the client reference is only populated after a shallower route is compiled, which explains why the deep route succeeds afterwards. Node 22's larger default stack size avoids the crash. This is a framework-level defect in Next.js cacheComponents/React Flight interaction, not user code.

1. Create a Next.js app with cacheComponents: true in next.config. 2. Add a trivial 'use client' pass-through component in the root layout wrapping children. 3. Create a page at 8 segments (e.g., app/deep/a/b/c/d/e/f/g/page.tsx). 4. Run next dev and request that deep route first. 5. Observe 500 RangeError: Maximum call stack size exceeded. 6. Request a shallower route (≤7 segments) and then the deep route again; it will succeed.

Disabling cacheComponents may degrade dev server performance or change component caching semantics if the feature was relied upon for other optimizations; it does not affect production builds. Rollback: remove the experimental.cacheComponents flag from next.config and restart the dev server. Not a permanent fix; monitor Next.js releases for an upstream patch.