Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

parallel routes: fix client reference manifest grouping for catch-all segments #60482

Conversation

ztanner
Copy link
Member

@ztanner ztanner commented Jan 10, 2024

What?

When using catch-all routes in conjunction with parallel routes, and when importing a client component ("use client"), the build would fail with the following error:

Could not find the module "PathToClientComponent" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Why?

flight-manifest-plugin generates manifests for each page entry. The clientModules portion of this manifest is used by React to load the appropriate client module. When React attempts to render a component tree and detects a module that it cannot find, it will throw this error. To illustrate why it isn't in the tree, consider the following example:

app
  page.tsx
  layout.tsx
  @slot
    [...catchAll]
      page.tsx
// app/layout.tsx
export default function Layout({children, slot}) {
  return <>{children} {slot}</>
}
// app/@slot/[...catchAll]/page.tsx
import Link from 'next/link'
export default function Page() {
  return <Link href="/">Test</Link>
}

When visiting /, we'd expect both the catch-all @slot and the root page to render. At build time, we'll generate a client reference manifest for / and /[...catchAll] since both are page components. However, the @slot imports a client component. When we attempt to load the client reference manifest for /, it will ignore the catch-all slot's manifest, resulting in the error.

How?

The entryNameToGroupName function seems to already exist to handle this scenario for other cases. For example, app/(group)/@named/foo/page needs to know about any manifests associated with app/foo. This updates the code to apply similar handling to catchAll segments. When applying this change to the example mentioned earlier, it will properly merge the manifests for both app/@slot/[...catchAll]/page.tsx and app/page.tsx because both will be part of the / group.

Closes NEXT-1908
Fixes #59747
Fixes #59510

Copy link
Member Author

ztanner commented Jan 10, 2024

In this stack: 🔧 Improved client reference manifest grouping for parallel routes

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite Graphite

@ijjk
Copy link
Member

ijjk commented Jan 10, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
buildDuration 12.9s 13.1s ⚠️ +191ms
buildDurationCached 7.2s 6.2s N/A
nodeModulesSize 199 MB 199 MB ⚠️ +2.37 kB
nextStartRea..uration (ms) 430ms 428ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
193.HASH.js gzip 181 B 182 B N/A
3f784ff6-HASH.js gzip 53.3 kB 53.3 kB N/A
433-HASH.js gzip 28.5 kB 28.6 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 239 B 242 B N/A
main-HASH.js gzip 31.8 kB 31.8 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 45.2 kB 45.2 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
_app-HASH.js gzip 194 B 195 B N/A
_error-HASH.js gzip 183 B 181 B N/A
amp-HASH.js gzip 504 B 502 B N/A
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 255 B 253 B N/A
head-HASH.js gzip 350 B 349 B N/A
hooks-HASH.js gzip 369 B 369 B
image-HASH.js gzip 4.28 kB 4.28 kB N/A
index-HASH.js gzip 255 B 256 B N/A
link-HASH.js gzip 2.61 kB 2.61 kB
routerDirect..HASH.js gzip 312 B 311 B N/A
script-HASH.js gzip 385 B 383 B N/A
withRouter-HASH.js gzip 307 B 308 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.4 kB 3.4 kB
Client Build Manifests
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
_buildManifest.js gzip 483 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
index.html gzip 528 B 528 B
link.html gzip 540 B 540 B
withRouter.html gzip 523 B 523 B
Overall change 1.59 kB 1.59 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
edge-ssr.js gzip 93.8 kB 93.8 kB N/A
page.js gzip 148 kB 148 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
middleware-b..fest.js gzip 624 B 624 B
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 37.5 kB 37.5 kB N/A
edge-runtime..pack.js gzip 1.92 kB 1.92 kB
Overall change 2.7 kB 2.7 kB
Next Runtimes
vercel/next.js canary vercel/next.js 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes Change
app-page-exp...dev.js gzip 169 kB 169 kB
app-page-exp..prod.js gzip 95.3 kB 95.3 kB
app-page-tur..prod.js gzip 96 kB 96 kB
app-page-tur..prod.js gzip 90.6 kB 90.6 kB
app-page.run...dev.js gzip 142 kB 142 kB
app-page.run..prod.js gzip 89.9 kB 89.9 kB
app-route-ex...dev.js gzip 24.1 kB 24.1 kB
app-route-ex..prod.js gzip 16.7 kB 16.7 kB
app-route-tu..prod.js gzip 16.7 kB 16.7 kB
app-route-tu..prod.js gzip 16.3 kB 16.3 kB
app-route.ru...dev.js gzip 23.5 kB 23.5 kB
app-route.ru..prod.js gzip 16.3 kB 16.3 kB
pages-api-tu..prod.js gzip 9.38 kB 9.38 kB
pages-api.ru...dev.js gzip 9.65 kB 9.65 kB
pages-api.ru..prod.js gzip 9.37 kB 9.37 kB
pages-turbo...prod.js gzip 21.9 kB 21.9 kB
pages.runtim...dev.js gzip 22.5 kB 22.5 kB
pages.runtim..prod.js gzip 21.9 kB 21.9 kB
server.runti..prod.js gzip 49.5 kB 49.5 kB
Overall change 940 kB 940 kB
Commit: c4c1d7d

@ztanner ztanner marked this pull request as ready for review January 10, 2024 17:58
@ztanner ztanner merged commit d6c754f into canary Jan 10, 2024
74 checks passed
@ztanner ztanner deleted the 01-10-Fix_client_reference_manifest_handling_of_catch-all_routes branch January 10, 2024 22:14
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants