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.

Sign up for GitHub

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

Jump to bottom

Error: Catch-all must be the last part of the URL when using opengraph-image.tsx inside a catch-all route #48162

Closed
1 task done
patrick91 opened this issue Apr 9, 2023 · 6 comments
Closed
1 task done

Error: Catch-all must be the last part of the URL when using opengraph-image.tsx inside a catch-all route #48162

patrick91 opened this issue Apr 9, 2023 · 6 comments
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. Metadata Related to Next.js' Metadata API.

Comments

@patrick91
Copy link
Contributor

patrick91 commented Apr 9, 2023 •
edited
Loading

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.16.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 7.13.5
    Relevant packages:
      next: 13.3.1-canary.3
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Metadata (metadata, generateMetadata, next/head, head.js)

Link to the code that reproduces this issue

https://github.com/EuroPython/website/tree/fa47fe9a3d7a732d9536ed0200dfe9b3f992565a

(newer version have a "workaround")

To Reproduce

in the repo above try to do npm install and then npm run dev, you should get an error

Describe the Bug

When using opengraph-image.tsx inside app/[...parts]/ I get the following error:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
event - compiled client and server successfully in 2.2s (371 modules)
wait  - compiling...
Error: Catch-all must be the last part of the URL.
    at UrlNode._insert (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:54:19)
    at UrlNode._insert (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:136:40)
    at UrlNode.insert (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:8:14)
    at /Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:159:46
    at Array.forEach (<anonymous>)
    at Object.getSortedRoutes (/Users/patrick/github/europython/website/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:159:21)
    at Watchpack.<anonymous> (/Users/patrick/github/europython/website/node_modules/next/dist/server/dev/next-dev-server.js:544:55) {
  type: 'Error'
}

removing opengraph-image.tsx fixes the issue.

Expected Behavior

I should be able to use opengraph-image.tsx inside a catch-all route

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response
@patrick91 patrick91 added the bug Issue was opened via the bug report template. label Apr 9, 2023
@github-actions github-actions bot added area: app App directory (appDir: true) Metadata Related to Next.js' Metadata API. labels Apr 9, 2023
@patrick91
Copy link
Contributor Author

I worked around this creating two non catch all routes (as I have only two levels), but I imagine this won't work in all cases 😊

@cosmicknox
Copy link

cosmicknox commented Apr 22, 2023 •
edited
Loading

i got this same errror today

Error: Catch-all must be the last part of the URL.

i had some pages name [...addresss] , [...tokenId]

removing .... got rid of the bug

@haneenmahd
Copy link

It's because you have sub routes inside the catch all route, which for example might [...nextAuth]. If you have sub routes inside catch all routes, it will throw an error. You need to move out the sub routes to anther route.

@huozhi
Copy link
Member

huozhi commented May 9, 2023

It's not possible now as dynamic og image could recieve params so it's could be a lambda/edge route, but all the possible paths including the request url paths to og image are caught by the catch-all routes.

For your case as it doesn't receive any params, so you can add a (group) routes on top of catch all routes

app
├── (catch-all)
│   ├── [...all]
│   │   └── page.tsx
│   └── opengraph-image.js
├── layout.js
├── opengraph-image.png
├── page.js

So it will generate a special path for og image under that group with a suffix, which is distinct from others

@huozhi huozhi closed this as completed May 9, 2023
@patrick91
Copy link
Contributor Author

@huozhi not sure if this means it will never be supported?

My use case is about having a catch-all route for pages on my site /page/nested-page, again I solved this by having two nested routes, but ideally this should work for any level, no?

@timfee timfee mentioned this issue May 10, 2023
Closed
1 task
@github-actions
Copy link
Contributor

github-actions bot commented Jun 9, 2023

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. Metadata Related to Next.js' Metadata API.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@patrick91 @huozhi @haneenmahd @cosmicknox