next.js icon indicating copy to clipboard operation
next.js copied to clipboard

[appDir] Co-located components in catch-all slug causes error if named with "page" in name

Open oBusk opened this issue 2 years ago • 0 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
Binaries:
  Node: 16.18.1
  npm: 9.1.1
Relevant packages:
  next: 13.0.4-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

If you co-locate a component in a catch-all segment ([...slug]) with a name that ends with page.(js|tsx?), you get Error: Catch-all must be the last part of the URL.

Expected Behavior

Either it works, or better error message and documentation.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/oBusk/catch-all-components

To Reproduce

Using appDir, create a catch-all segment.

📁 [...slug]
  📜 page.tsx

Now you want to have some component co-located with the page code. If you name it any of

  • [...slug]/page.client.tsx
  • [...slug]/this-is-not-a-page-but-ends-with-page.tsx
  • [...slug]/components/the-page.tsx

You will recieve a error

Error: Catch-all must be the last part of the URL.
    at UrlNode._insert ({repo-dir}/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:54:19)
    at UrlNode._insert ({repo-dir}/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:136:40)
    at UrlNode.insert ({repo-dir}/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:8:14)
    at {repo-dir}/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:159:46
    at Array.forEach (<anonymous>)
    at Object.getSortedRoutes ({repo-dir}/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:159:21)
    at Watchpack.<anonymous> ({repo-dir}/node_modules/next/dist/server/dev/next-dev-server.js:437:55)

I suspect there is some check for page but not actually checking if file is only named page. From what I can tell in the Special Files documentation, only page.tsx should be special, and this-is-not-a-page.tsx or even page.client.tsx should work.

oBusk avatar Nov 16 '22 01:11 oBusk