mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
71335a9912
Fix NEXT-2165 ### What? Addresses the limitation of #60240, where a dummy `default` file is required in parallel route child slot to prevent errors in dev server rendering (`TypeError: Cannot read properties of undefined (reading 'clientModules')`) as well as errors in build and deploy (`Error: ENOENT: no such file or directory, lstat ‘/vercel/path0/.next/server/app/parallel-route/[section]/@part/[partSlug]/page_client-reference-manifest.js’`) Without the `default.tsx`, builds and deployments will fail with: <img width="956" alt="CleanShot 2024-01-18 at 02 12 36@2x" src="https://github.com/vercel/next.js/assets/179761/80ba61bd-6ec0-4b16-a393-dc9375227e19"> local dev server will also crash with: <img width="986" alt="CleanShot 2024-01-18 at 02 13 19@2x" src="https://github.com/vercel/next.js/assets/179761/cc500a32-b2f8-47b4-999e-e57cf5141b2f"> > TypeError: Cannot read properties of undefined (reading 'clientModules') ### Why? Since `default.tsx` is not a compulsory when you have slot that are specific and ends with a dynamic route segment, this PR extends support so that it is possible mixing catch-all routes with specific non-catchall routes without requiring an additional `default.tsx` . This PR will allow the following test cases to pass: ``` it('should not add the catch-all route to segments that have a more specific [dynamicRoute]', () => { const appPaths = { '/': ['/page'], '/[[...catchAll]]': ['/[[...catchAll]]/page'], '/nested/[foo]/[bar]/default': [ '/nested/[foo]/[bar]/default', '/nested/[foo]/[bar]/@slot0/default', '/nested/[foo]/[bar]/@slot2/default', ], '/nested/[foo]/[bar]': [ '/nested/[foo]/[bar]/@slot0/page', '/nested/[foo]/[bar]/@slot1/page', ], '/nested/[foo]/[bar]/[baz]': [ '/nested/[foo]/[bar]/@slot0/[baz]/page', '/nested/[foo]/[bar]/@slot1/[baz]/page', ], '/[locale]/nested/[foo]/[bar]/[baz]/[qux]': [ '/[locale]/nested/[foo]/[bar]/@slot1/[baz]/[qux]/page', ], } const initialAppPaths = JSON.parse(JSON.stringify(appPaths)) normalizeCatchAllRoutes(appPaths) expect(appPaths).toMatchObject(initialAppPaths) }) ... ``` ```it('should not add the catch-all route to segments that have a more specific [dynamicRoute]', () => { const appPaths = { '/': ['/page'], '/[[...catchAll]]': ['/[[...catchAll]]/page'], '/nested/[foo]/[bar]/default': [ '/nested/[foo]/[bar]/default', '/nested/[foo]/[bar]/@slot0/default', '/nested/[foo]/[bar]/@slot2/default', ], '/nested/[foo]/[bar]': [ '/nested/[foo]/[bar]/@slot0/page', '/nested/[foo]/[bar]/@slot1/page', ], '/nested/[foo]/[bar]/[baz]': [ '/nested/[foo]/[bar]/@slot0/[baz]/page', '/nested/[foo]/[bar]/@slot1/[baz]/page', ], '/[locale]/nested/[foo]/[bar]/[baz]/[qux]': [ '/[locale]/nested/[foo]/[bar]/@slot1/[baz]/[qux]/page', ], } ... ``` and allow parallel routes defined in this [code repro](https://github.com/williamli/nextjs-NEXT-2165) to build.  ### How? `packages/next/src/build/normalize-catchall-routes.ts` is extended to check `appPath` to see if it is: 1. the route is not a catchall 2. `isMoreSpecific` than the closest `catchAllRoute`. where `isMoreSpecific` is defined as: ``` function isMoreSpecific(pathname: string, catchAllRoute: string): boolean { const pathnameDepth = pathname.split('/').length const catchAllRouteDepth = catchAllRoute.split('/').length - 1 return pathnameDepth > catchAllRouteDepth } ``` --------- Co-authored-by: Zack Tanner <[email protected]>
88 lines
3.7 KiB
TypeScript
88 lines
3.7 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
|
|
createNextDescribe(
|
|
'parallel-routes-catchall-dynamic-segment',
|
|
{
|
|
files: __dirname,
|
|
},
|
|
({ next }) => {
|
|
it('should match default and dynamic segment paths before catch-all', async () => {
|
|
let browser = await next.browser('/en/nested')
|
|
|
|
// we have a top-level catch-all but the /nested dir doesn't have a default/page until the /[foo]/[bar] segment
|
|
// so we expect the top-level catch-all to render
|
|
expect(await browser.elementById('children').text()).toBe(
|
|
'/[locale]/[[...catchAll]]/page.tsx'
|
|
)
|
|
|
|
browser = await next.browser('/en/nested/foo/bar')
|
|
|
|
// we're now at the /[foo]/[bar] segment, so we expect the matched page to be the default (since there's no page defined)
|
|
expect(await browser.elementById('nested-children').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/default.tsx'
|
|
)
|
|
|
|
// we expect the slot0 to match since there's a page defined at this segment
|
|
expect(await browser.elementById('slot0').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot0/page.tsx'
|
|
)
|
|
|
|
// we expect the slot1 to match since there's a page defined at this segment
|
|
expect(await browser.elementById('slot1').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot1/page.tsx'
|
|
)
|
|
|
|
// we expect the slot2 to match since there's a default page defined at this segment
|
|
expect(await browser.elementById('slot2').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot2/default.tsx'
|
|
)
|
|
|
|
browser = await next.browser('/en/nested/foo/bar/baz')
|
|
|
|
// the page slot should still be the one matched at the /[foo]/[bar] segment because it's the default and we
|
|
// didn't define a page at the /[foo]/[bar]/[baz] segment
|
|
expect(await browser.elementById('nested-children').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/default.tsx'
|
|
)
|
|
|
|
// we do have a slot for the `[baz]` dynamic segment in slot0 and so we expect that to match
|
|
expect(await browser.elementById('slot0').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot0/[baz]/page.tsx'
|
|
)
|
|
|
|
// we do have a slot for the `[baz]` dynamic segment in slot1 and so we expect that to match
|
|
expect(await browser.elementById('slot1').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot1/[baz]/page.tsx'
|
|
)
|
|
|
|
// we do not have a slot for the `[baz]` dynamic segment in slot2 and so the default page is matched
|
|
expect(await browser.elementById('slot2').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot2/default.tsx'
|
|
)
|
|
|
|
browser = await next.browser('/en/nested/foo/bar/baz/qux')
|
|
|
|
// the page slot should still be the one matched at the /[foo]/[bar] segment because it's the default and we
|
|
// didn't define a page at the /[foo]/[bar]/[baz]/[qux] segment
|
|
expect(await browser.elementById('nested-children').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/default.tsx'
|
|
)
|
|
|
|
// we do not have a slot for the `[baz]/[qux]` dynamic segment in slot0 and so we expect the default page at `@slot0/` to be returned
|
|
expect(await browser.elementById('slot0').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot0/default.tsx'
|
|
)
|
|
|
|
// we do have a slot for the `[baz]/[qux]` dynamic segment in slot1 and so we expect that to no match
|
|
expect(await browser.elementById('slot1').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot1/[baz]/[qux]/page.tsx'
|
|
)
|
|
|
|
// we do not have a slot for the `[baz]/[qux]` dynamic segment in slot2 and so we expect the default page at `@slot2/` to be returned
|
|
expect(await browser.elementById('slot2').text()).toBe(
|
|
'/[locale]/nested/[foo]/[bar]/@slot2/default.tsx'
|
|
)
|
|
})
|
|
}
|
|
)
|