d6c754f332
### 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 ``` ```tsx // app/layout.tsx export default function Layout({children, slot}) { return <>{children} {slot}</> } ``` ```tsx // 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 |
||
---|---|---|
.. | ||
app | ||
next.config.js | ||
parallel-routes-catchall.test.ts |