next-on-pages: [🐛 Bug]: Not-found page doesn't work with last vercel version v31.2.0 in edge runtime

next-on-pages environment related information

System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.4.0: Mon Mar 6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103 CPU: (8) arm64 Apple M1 Memory: 16 GB Shell: /bin/zsh Binaries: Node: 18.15.0 Yarn: 1.22.17 npm: 9.5.0 pnpm: 8.6.5 Package Manager Used: yarn (classic) Relevant Packages: @cloudflare/next-on-pages: 1.4.0 vercel: N/A next: N/A

Description

Hi guys. I tried to run npx @cloudflare/next-on-pages on Friday and got this error. (Everything was fine a day before).

Screenshot 2023-07-30 at 19 50 32

Vercel version had been up to 31.2.0 this day so maybe that was the problem.

When I tried to add export const runtime = "edge"; to not-found.tsx page I’ve got this error:

Screenshot 2023-07-30 at 19 57 47

not-found.tsx

export const runtime = "edge";

export default async function NotFoundPage() {
  return (
    <html lang="en">
      <body>
        <div>test</div>
      </body>
    </html>
  );
}

Reproduction

No response

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

  • Would you like to help fixing this bug?

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 66 (18 by maintainers)

Commits related to this issue

Most upvoted comments

I was able to get the app to build. I just added the not-found.tsx file to the app folder to resolve the /_not-found bug.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
       <h2>Not Found</h2>
       <p>Could not find requested resource</p>
      <a href="/">Return Home</a>
    </div>
  )
}

Then to overcome the _error issue, I couldn’t fix it with the app router custom errors but I just added custom errors to the pages folder.

pages
├── 404.js
└── 500.js

These files are just very simple for now:

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server Error</h1>
}

Now the app builds with npx @cloudflare/next-on-pages@1.

*Update:

To get it to work with Internationalisation… it was more complex but I added a blank global layout for the not-found.tsx route to work:

// app/layout.tsx
import { ReactNode } from 'react'

export default function RootLayout({ children }: { children: ReactNode }) {
  return <>{children}</>
}

Then I have a folder structure like this:

app
├── [lang]
│   ├── layout.tsx
│   └── page.tsx
├── favicon.ico
├── layout.tsx
└── not-found.tsx

I added <html> and <body> tags to my not-found.tsx file then in my [lang]/layout.tsx file I continue to handle all the localisation stuff like normal, and you can set up the lang and direction html attributes.

// app/[lang]/layout.tsx
export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: { lang: string }
}) {
  const direction = determineLocaleDirection(params.lang)

  return (
    <html lang={params.lang} dir={direction}>
      {/* usual stuff */}
    </html>
    )
}
+5
tao on Oct 4, 2023

@nikitaeverywhere I had the same issue, and I was able to solve it by using the latest beta release. Just change the build command to

npx @cloudflare/next-on-pages@0.0.0-2b5c8f2

+4
xanderim on Dec 30, 2023

Got it thanks, the complexity of this nextjs is ridiculous i will try to pull out the react components and put them into a vanilla react project.

+4
vans163 on Aug 10, 2023

same error, so annoying. remix just worked out of the box. I will side with joe armstrong the creator of erlang here RIP, when he said NPM and the node ecosystem is simply wack, taking something that should be smoothly and easily and adding a layer of 3 PhDs required just to deploy a project.

+4
vans163 on Aug 10, 2023

@dario-piotrowicz I still have this issue locally, I have only one not-found.js in top level

npx @cloudflare/next-on-pages@latest

⚡️ 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
+3
anonymouscatcher on Mar 4, 2024

@emrecoban i found my problem. i used the generateMetadata in the layout. seams like the layout also have to be static if using a not found.

But this doesn’t show the warning for the dynamic not-found page

+3
wuifdesign on Aug 26, 2023

I see @nikitaeverywhere I’m glad that it’s not something we’re causing 😄 (but of course I’m sad that Next.js seem to present this many issues around CSP 🥲)

Anyways thanks a ton for sharing the Next.js issue, I gave it a quick scan through and it does feel like something something that could definitely come in handy to be aware of and keep in mind! so again thanks a bunch for sharing this info! ❤️

+2
dario-piotrowicz on Jan 1, 2024

@xanderim @dario-piotrowicz thanks for the feedback. I changed the build command in CloudFlare page settings, and both “latest” npx @cloudflare/next-on-pages@1 and npx @cloudflare/next-on-pages@0.0.0-2b5c8f2 work as of now.

nextjs 14 is however totally incapable of handling CSP but that’s unrelated 😄

Thanks.

+2
nikitaeverywhere on Dec 31, 2023

Thank you so much, Dario! I’ll give it a shot sometime soon. I appreciate your work!

+2
w33ts on Dec 11, 2023

Hi all, this popped into my head just earlier, but you can probably do something like the following for your build command as a temporary workaround. The real fix would be Vercel resolving this.

mkdir .vercel; echo '{"projectId":"_","orgId":"_","settings":{"framework":"nextjs"}}' > .vercel/project.json; npx vercel build; rm -rf .vercel/output/functions/_not-found*; rm -rf .vercel/output/functions/_error*; npx @cloudflare/next-on-pages --skip-build;
+2
james-elicx on Nov 27, 2023

Been having the same issue as you folks mentioned.

What ended up working for us. Which fixes the deploy, but still fails a runtime

  • Have a src/app/error.tsx with "use client" directive
  • Have a src/app/not-found.tsx with "use client" directive
  • Have a src/pages/404.js (No directive)
  • Have a src/pages/404.js (No directive)
  • Specify the edge runtime in my src/app/layout.tsx.

(PS: I’m using src/app folder):

image

Aside from that, the usuals. 😃

If it helps. This is a permalink to the commit that worked in our project 😄 https://github.com/JSConfCL/turuleca/tree/c9b2060aab57f7d0c0bb5b56ff56f6ffa231c10a

image

Though as mentioned, now we are getting some client-side errors. ad924d6e.turuleca.pages.dev

Console

Error: NextRouter was not mounted
+2
fforres on Oct 8, 2023

@microooji Sure. Example app/layout.tsx:

import './globals.css'
import { Inter } from 'next/font/google'
import { cookies } from 'next/headers';

const inter = Inter({ subsets: ['latin'] })

export const runtime = "edge"; // <--  Specifying edge runtime.

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  console.log(cookies().get('some-cookie')); // <-- reading cookies turning route into dynamic rendering.

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Without app/not-found.tsx, this is the error I see when running npx @cloudflare/next-on-pages@1: image

+2
gowza on Oct 7, 2023

@emrecoban awesome! no problem! thanks so much for confirming that’s all good now (or at least as good as it can be given our limitations 😅) ❤️

+2
dario-piotrowicz on Aug 9, 2023

I’ve just merged #418 which introduces a temporary workaround for this issue, it allows the use of a not-found page as long as it doesn’t contain runtime logic

It is not ideal but the best we can do for now, I’ve marked this issue as blocked by external as we’ll have to investigate if maybe Vercel/Next can the generation of serverless functions for such routes on their end

+2
dario-piotrowicz on Aug 9, 2023

@dario-piotrowicz after adding middleware.ts to the bootstrapped default nextjs project (npx create-next-app@latest) as per their docs (literally copy-paste), I’ve got the following error:

image

And after adding missing pages and marking all as export const runtime = "edge";,

image

I still get this:

image image

(latest available)

Does it mean no way to run it on Cloudflare?

+1
nikitaeverywhere on Dec 29, 2023

PR https://github.com/cloudflare/next-on-pages/pull/585 has closed this issue, although the situation is still not perfect I would keep this issue closed so not to keep the conversation going, making it too diluted/unfocused

What things should work like right now in applications using the App router (in the latest beta release and from the next stable release):

If you see that any of the two points above doesn’t work as expected please comment here and we can reopen this issue, if you spot anything else please let’s open a new issue focused on that specific problem 🙏

Sorry for the trouble here, this one is a bit of a painful issue, hopefully the latest changes help the situation 😅

+1
dario-piotrowicz on Dec 13, 2023

Hi all, I’ve opened #585 to fix this issue, the changes make it so that invalid _error functions generated when you have a layout that uses the edge runtime and also a static not-found route get ignored.

You still however cannot have a not-found route using the edge runtime.

Please give the prerelease a try and let me know if it works for you 🙏

+1
dario-piotrowicz on Dec 11, 2023

@anonymouscatcher this issue seems caused by how Vercel builds functions and it is a bit of our control to fix, one possible solution I thought of was allowing users to ask next-on-pages to ignore invalid routes as sometimes those are actually ok to ignore (like in the layout/not-found case mentioned in this thread and reproduced in this application).

I implemented that here: https://github.com/cloudflare/next-on-pages/pull/497, the PR hasn’t made much progress since I was trying to get the team’s feedback on this since it’s really not a super elegant solution.

if you could, could you just the prerelease a try and let me know what you think? I would surely appreciate external feedback on this.

If the solution above works reasonably well for people I think I can push for it with the team and merge it soon, so again I’d be very thankful if people could give it a go and let me know if it works for them 🙂

+1
dario-piotrowicz on Nov 12, 2023

I get the error message about the missing edge runtime on the _not-found and _error route (both files do not exist in this project) when I try to work with next/headers in the layout.tsx file. Once I remove this everything is fine.

+1
kev-ac on Nov 8, 2023

@vader1359 I’m pretty sure you’re experiencing something different, would it be possible for you to create a minimal reproduction of it to share and open a new issue for it?

+1
dario-piotrowicz on Oct 29, 2023

Been having the same issue as you folks mentioned.

What ended up working for us. Which fixes the deploy, but still fails a runtime

* Have a `src/app/error.tsx` with `"use client"` directive

* Have a `src/app/not-found.tsx` with `"use client"` directive

* Have a `src/pages/404.js` (No directive)

* Have a `src/pages/404.js` (No directive)

* Specify the edge runtime in my `src/app/layout.tsx`.

(PS: I’m using src/app folder): image

Aside from that, the usuals. 😃

If it helps. This is a permalink to the commit that worked in our project 😄 https://github.com/JSConfCL/turuleca/tree/c9b2060aab57f7d0c0bb5b56ff56f6ffa231c10a

image

Though as mentioned, now we are getting some client-side errors. ad924d6e.turuleca.pages.dev

Console

Error: NextRouter was not mounted

FYI this worked for us. Thanks!

+1
YoranBrondsema on Oct 20, 2023

After trying several things the only solution that worked for me was to remove export const runtime = "edge" from both my not-found.tsx and app/layout.tsx.

+1
arthureberledev on Oct 18, 2023

the fix @tao mentioned worked for me, in the sense that it got @cloudflare/next-on-pages to build. BUT the only problem is that when the user goes to a not found route (ie /asdf), the /pages/404.js is rendering instead of /app/not-found.tsx. I can work around this by just importing the same component used in /app/not-found.tsx but this seems hacky especially since I’m trying to use only the app router.

I guess this proves further that @cloudflare/next-on-pages has issues with error and not found pages in the app router when they use the edge runtime, but not for the pages router.

@dario-piotrowicz appreciate anything you can do for this 💪

+1
cbonaco1 on Oct 4, 2023

@vans163 is there a reason why you can’t use the PR’s prerelase?

Also since the change made it into main it’s also been published in the latest beta

I did npm i @cloudflare/next-on-pages@0.0.0-705a95b

  "dependencies": {
    "@cloudflare/next-on-pages": "^0.0.0-705a95b",

I dont get why this keeps happening in the cloudflare pipeline

09:54:20.388 | Executing user command: npx @cloudflare/next-on-pages@1
-- | --
09:54:22.876 | npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages@1.5.0
+1
vans163 on Aug 10, 2023
Read more comments on GitHub
← next-on-pages: [🐛 Bug]: Nextjs v13.3.1 fresh install worker threw exception
next-on-pages: [🐛 Bug]: Unable to deploy `commerce` next.js app →