[🐛 Bug]: not-found component doesn't work with edge runtime

DeJayDev commented 3 months ago

next-on-pages environment related information

System:
        Platform: linux
        Arch: x64
        Version: #1 SMP Fri Mar 29 23:14:13 UTC 2024
        CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
        Memory: 16 GB
        Shell: /bin/bash
Package Manager Used: npm (10.8.1)

Relevant Packages:
        @cloudflare/next-on-pages: 1.12.0
        vercel: N/A
        next: 14.2.4

Description

This is a follow up to #413. I've replicated the following Next on Pages error as requested: (@dario-piotrowicz)

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️
⚡️  The following routes were not configured to run with the Edge Runtime:
⚡️    - /_error
⚡️
⚡️  Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️    export const runtime = 'edge';
⚡️
⚡️  You can read more about the Edge Runtime on the Next.js documentation:
⚡️    https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

Reproduction

In my testing I've actually found two methods of triggering this error.

DeJayDev/error-edge-runtime-reproduction@hybrid.
- Attempting to use the not-found.tsx file in a hybrid pages/app router project as shown at https://github.com/DeJayDev/error-edge-runtime-reproduction/commit/415665a0b21c4e495ce046f94557dd00e9007f8a will trigger this error. The Metadata from layout.tsx is important, as it forces the layout, and thus all pages on the app router to be using the edge runtime. The not-found (_error) component cannot be nested in this case.
DeJayDev/error-edge-runtime-reproduction@ssr-error
- This one may be slightly unrelated, but still results in the same error. By following Vercel's documentation on using a custom error component in Pages Router projects for "Reusing the built in error page", we find ourselves in a situation where Next.js wants you to define the runtime as experimental-edge, but Next on Pages needs the runtime to be defined as edge. All I've done for this one is add the sample component with the edge runtime rule, tripping up vercel build.

My understanding is hybrid Pages and App Router apps are the predominant case of this issue. As when using not-found.tsx in an App Router project with the edge runtime specified, Next on Pages correctly generates the _not-found Edge Function. Without the edge runtime, it builds as _error.rsc.json.

My situation which required needing to entirely delete the _error and _not-found pages isn't something I've been able to reproduce.

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

This title may not be great and if you need clarification on anything please ask. I'm quick to respond :)

Would you like to help?

[X] Would you like to help fixing this bug?

KagamiChan commented 3 weeks ago

I met the same issue when adding a middleware in app router, next.js expects to use experimental-edge but the cf build tool only accepts edge runtime

irvinebroque commented 3 weeks ago

You might want to try experimenting with https://opennext.js.org/cloudflare, which has supports dynamic error pages. Would love feedback on if this solves what you're running into.

KagamiChan commented 3 weeks ago

@irvinebroque that's quite exciting! looking forward to the support for middleware

cloudflare / next-on-pages