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

AlexandrNetsvetov · 2023-07-30T17:09:46Z

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).

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:

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?

The text was updated successfully, but these errors were encountered:

BlackBerry009 · 2023-07-31T01:43:41Z

Yes. I have the same problem.

dario-piotrowicz · 2023-07-31T11:36:36Z

Hi @AlexandrNetsvetov thank you very much for the issue 🙂

The second part of the issue is a duplicate of #288

The first could be a very similar issue, it's interesting that it worked on an older Vercel CLI but not on a new one, I'll investigate it

if you could share your code that'd be very helpful 🙏 , if that's not possible, anyways I'd just like to double-check, am I correct in thinking that you're using app directory? (as in pages you'd have 404.tsx/jsx instead I think?)

PS: @BlackBerry009, you as well, if you can share your code that could be very helpful 🙂 🙏 (if you experienced the first part of the issue this is the right place, if you experienced the second part please share info in #288)

AlexandrNetsvetov · 2023-07-31T11:48:07Z

@dario-piotrowicz Thanks for your answer.

Yes, I'm using app directory.

I can't share my code but I'm ready to provide you all details that you need.

PS: I've added export const runtime = "edge"; field only because my build had been fallen with first error message. My not-found page used to worked without edge runtime for vercel 31.1.1.

dario-piotrowicz · 2023-07-31T12:02:16Z

Thanks a lot for the info @AlexandrNetsvetov 😄

I'll investigate and if more info is needed I'll let you know 🙂 🙏

dario-piotrowicz · 2023-08-01T12:27:12Z

Minimal Reproduction: https://github.com/dario-piotrowicz/next-on-pages-app-not-found-vercel-31-issue-reproduction

emrecoban · 2023-08-08T19:17:19Z

My app throws the same error.

Next v13.4.13
cloudflare/next-on-pages v1.5.0

dario-piotrowicz · 2023-08-09T18:02:13Z

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

emrecoban · 2023-08-09T19:29:35Z

I've tried that solution, but the issue still occurs @dario-piotrowicz.

{
  "devDependencies": {
    "@cloudflare/next-on-pages": "https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/5786546906/npm-package-next-on-pages-418",
  }
}

Build logs in no edge runtime:

22:21:28.531 | ⚡️The following routes were not configured to run with the Edge Runtime:
22:21:28.531 | ⚡️ - /_not-found
22:21:28.531 | ⚡️
22:21:28.532 | ⚡️Please make sure that all your non-static routes export the following edge runtime route segment config:
22:21:28.532 | ⚡️ export const runtime = 'edge';

Build logs in edge runtime:

22:24:11.400 | ⚡️The following routes were not configured to run with the Edge Runtime:
22:24:11.401 | ⚡️  - /_error
22:24:11.401 | ⚡️
22:24:11.401 | ⚡️Please make sure that all your non-static routes export the following edge runtime route segment config:
22:24:11.401 | ⚡️ export const runtime = 'edge';

dario-piotrowicz · 2023-08-09T21:11:17Z

@emrecoban are you sure the prerelease got installed correctly? 😓

can you double check and make sure that next-on-pages tells you that it's using the prerelease version?
(like this)

I just used the prerelease to deploy this application which is getting built correctly and working as expected:
https://ed46310b.next-apps-for-testing.pages.dev/

(If you confirm that you're indeed using the prerelease, can you spot something different between your application and mine that could make yours not work?)

emrecoban · 2023-08-09T22:07:48Z

Finally I'm here. Okay, I updated next-on-pages, and then it worked. But I had to add Vercel@30.0.0 package, or something (I'm not sure). Because I couldn't update the package for a while as follow (The message I gave up to send).
_

It seems that the reason I got the error is cloudflare/next-on-pages not updated.

I'm investigating how to update the package to pre-version, but pnpm throws that error: No matching version found for @cloudflare/next-on-pages@0.0.0-d1839d6. I didn't get why pnpm throws this one.

I've checked the versions of cloudflare/next-on-pages, and have not found the commit d1839d6.

_

Okay, another issue is related to my app, anyway. Thanks a lot! @dario-piotrowicz

dario-piotrowicz · 2023-08-09T22:25:59Z

@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 😅) ❤️

vans163 · 2023-08-10T00:16:57Z

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.

vans163 · 2023-08-10T00:39:12Z

20:37:52.323 | ➤ YN0000: │ /tmp/xfs-76265625 STDOUT Some issues need review, and may require choosing
-- | --
20:37:52.323 | ➤ YN0000: │ /tmp/xfs-76265625 STDOUT a different dependency.
20:37:52.323 | ➤ YN0000: │ /tmp/xfs-76265625 STDOUT
20:37:52.324 | ➤ YN0000: │ /tmp/xfs-76265625 STDOUT Run `npm audit` for details.
20:37:52.869 | ➤ YN0058: │ next-on-pages@https://github.com/cloudflare/next-on-pages.git#commit=5bfbbe15ce14369016992a7cca9f93847851be67: Packing the package failed (exit code 1, logs can be found here: /tmp/xfs-bf62a741/pack.log)
20:37:52.870 | ➤ YN0000: └ Completed in 1m 46s
20:37:52.870 | ➤ YN0000: Failed with errors in 1m 46s
20:37:53.996 | Error: Exit with error code: 1
20:37:53.997 | at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
20:37:53.997 | at Object.onceWrapper (node:events:652:26)
20:37:53.997 | at ChildProcess.emit (node:events:537:28)
20:37:53.998 | at ChildProcess._handle.onexit (node:internal/child_process:291:12)
20:37:54.007 | Failed: build command exited with code: 1
20:37:55.100 | Failed: error occurred while running build command

added like so

    "next-on-pages": "git+https://github.com/cloudflare/next-on-pages.git#5bfbbe15ce14369016992a7cca9f93847851be67",

vans163 · 2023-08-10T01:01:19Z

Does anyone know how to force next-on-pages to be commit or branch bound?



20:58:32.965 | Executing user command: npx @cloudflare/next-on-pages@1
-- | --
20:58:35.048 | npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages@1.5.0

even with this line in package.json it still pulls wrong version

 "next-on-pages": "git+https://github.com/cloudflare/next-on-pages.git#5bfbbe15ce14369016992a7cca9f93847851be67",

dario-piotrowicz · 2023-08-10T09:25:18Z

@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

vans163 · 2023-08-10T13:55:31Z

@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

emrecoban · 2023-08-10T14:01:16Z

@vans163 I've checked my app's build logs, and then seen the same warn. You can ignore it.

Just check the devDependencies list:

01:35:41.009 | devDependencies:
01:35:41.009 | + @cloudflare/next-on-pages 0.0.0-54d6325
01:35:41.010 | + @tailwindcss/forms 0.5.4
01:35:41.010 | + vercel 30.0.0
01:35:41.010 |  
01:35:41.010 | Done in 29.2s
01:35:41.050 | Executing user command: npx @cloudflare/next-on-pages@1
01:35:47.290 | npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages@1.5.0

Everything is okay in the app now.

You can install the 54d6325 in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/5786546906/npm-package-next-on-pages-418

vans163 · 2023-08-10T14:14:06Z

@vans163 I've checked my app's build logs, and then seen the same warn. You can ignore it.

Just check the devDependencies list:

01:35:41.009 | devDependencies:
01:35:41.009 | + @cloudflare/next-on-pages 0.0.0-54d6325
01:35:41.010 | + @tailwindcss/forms 0.5.4
01:35:41.010 | + vercel 30.0.0
01:35:41.010 |  
01:35:41.010 | Done in 29.2s
01:35:41.050 | Executing user command: npx @cloudflare/next-on-pages@1
01:35:47.290 | npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages@1.5.0

Everything is okay in the app now.

You can install the 54d6325 in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/5786546906/npm-package-next-on-pages-418

Yea same error



10:11:38.298 | ⚡️ Completed `npx vercel build`.
-- | --
10:11:40.688 |  
10:11:40.689 | ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
10:11:40.689 | ⚡️
10:11:40.689 | ⚡️ 	The following routes were not configured to run with the Edge Runtime:
10:11:40.689 | ⚡️ 	  - /_error
10:11:40.689 | ⚡️
10:11:40.690 | ⚡️ 	Please make sure that all your non-static routes export the following edge runtime route segment config:
10:11:40.690 | ⚡️ 	  export const runtime = 'edge';
10:11:40.690 | ⚡️
10:11:40.690 | ⚡️ 	You can read more about the Edge Runtime on the Next.js documentation:
10:11:40.690 | ⚡️ 	  https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
10:11:40.690 |  
10:11:40.732 | Failed: Error while executing user command. Exited with error code: 1
10:11:40.743 | Failed: build command exited with code: 1
10:11:44.924 | Failed: error occurred while running build command

This is the repo, maybe if you have a chance to look I would really appreciate it. I have no idea whats wrong. It is using the app/ instead of pages/ feature of NEXTJS. Its a charity project to help out a not-for-profit.

https://github.com/vans163/link

emrecoban · 2023-08-10T15:17:09Z

@vans163 I've tried several ways, but couldn't be successful. I am not sure what causes this error. Although I added different versions of next-on-pages (included beta), it threw the same error. I should say that your packages are not working together. Maybe it is related to that.

 WARN  Issues with peer dependencies found
.
└─┬ pliny 0.1.1
  └─┬ kbar 0.1.0-beta.41
    └─┬ react-virtual 2.10.4
      └── ✕ unmet peer react@"^16.6.3 || ^17.0.0": found 18.2.0

vans163 · 2023-08-10T16:53:06Z

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.

vans163 · 2023-08-10T21:17:35Z

@vans163 I've tried several ways, but couldn't be successful. I am not sure what causes this error. Although I added different versions of next-on-pages (included beta), it threw the same error. I should say that your packages are not working together. Maybe it is related to that.
 WARN  Issues with peer dependencies found
.
└─┬ pliny 0.1.1
  └─┬ kbar 0.1.0-beta.41
    └─┬ react-virtual 2.10.4
      └── ✕ unmet peer react@"^16.6.3 || ^17.0.0": found 18.2.0

So moving the project out was gonna be a pain, I read carefully your PR #418 and hit a eureka. Deleting not-found from the app/ root made it automagically-gandalf-wizardry stop producing the _error artifact after compile. It compiled!

vans163 · 2023-08-10T21:39:21Z

Now its giving

      "message": [
        "EvalError: Code generation from strings disallowed for this context"
      ],

visiting any page on the router lol..

EDIT: This is most likely due to the mdx templating engine to turn markdown into html code. Dead end it seems.

wuifdesign · 2023-08-25T13:26:23Z

using the app router and adding a not-found.tsx still gives me the same error. I'm using @cloudflare/next-on-pages CLI v.1.5.1 but also tried the newest beta without a difference.

Is there any specific setting i have to set to get this working, as above is mentioned someone got a successful build.

⚡️ 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

always-maap · 2023-12-09T22:40:10Z

removing app/not-found.tsx fixed it temporarily

https://github.com/always-maap/NIT-Academy

dario-piotrowicz · 2023-12-11T10:33:28Z

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 🙏

w33ts · 2023-12-11T15:00:42Z

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

dario-piotrowicz · 2023-12-13T12:21:27Z

PR #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):

not-found routes need to be static and not have server side logic (as per Add a workaround for the not-found app directory issue #418), if they do the build process is expected to fail
assuming that the app has a static not-found route, the app can have a root layout that does have server side (edge) logic (as per fix app router invalid _error functions #585)

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 😅

nikitaeverywhere · 2023-12-29T17:59:05Z

@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:

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

I still get this:

(latest available)

Does it mean no way to run it on Cloudflare?

xanderim · 2023-12-30T01:00:24Z

@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

dario-piotrowicz · 2023-12-30T14:34:08Z

@xanderim thanks for confirming that the latest beta release does work 🙂

I've just cut a standard release so using the latest stable release should work fine now 🤞

@nikitaeverywhere please give it a try and let me know if it works for you 🙂

nikitaeverywhere · 2023-12-31T12:36:43Z

@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 :D

Thanks.

dario-piotrowicz · 2024-01-01T10:18:53Z

@nikitaeverywhere I'm glad things work for you now 😄 🚀

Regarding Next.js 14 and CSP, sorry I am not aware of the incompatibility you're mentioning, is that something totally on Next.js? or is it something caused by our adapter? (if it's the latter please open a new gh issue for that, so that we can look into it 🙏)

nikitaeverywhere · 2024-01-01T16:22:43Z

Regarding Next.js 14 and CSP

@dario-piotrowicz it's on the NextJS side completely. I personally think NextJS is just not designed to support CSP. You can find a lot of lengthy threads with other people suffering.

So, as for Cloudflare, no worries at all :D

dario-piotrowicz · 2024-01-01T21:34:21Z

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! ❤️

- deleted `not-found.tsx` per cloudflare/next-on-pages#413 and cloudflare/next-on-pages#174 - added `export const runtime = 'edge';` to all `layout.tsx` files

anonymouscatcher · 2024-03-04T11:20:11Z

@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

switz · 2024-05-24T16:32:19Z

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

seeing this same issue myself, has anyone found a solution? (generally wouldn't bump but its 2.5 months old)

cameron-eth · 2024-05-25T18:41:20Z

Hey all, I've built on top of morphic but everytime the search results post, the app re routes to the home page ?

AlecKriebel · 2024-06-23T02:13:36Z

For others experiencing this issue, upgrading from "vercel": "^31.1.0" to "vercel": "^32.4.1" (latest) in the Next.js project I was trying to build for pages fixed this for me.

DeJayDev · 2024-06-27T20:36:01Z

Upgrading the vercel dependency did not fix the error in my project, however I've seen successful builds by entirely removing the _error directory before running Next on Pages.

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;

This command was written by @james-elicx in the Cloudflare Developers Discord, you can find the original conversation on this Answer Overflow Page

To use this command for production builds, I added it to my package.json as cf:build and changed the command to npm run cf:build. You will need to escape (\") all of the double quotes with this method. However, you can also get away with just pasting that as your build command in the Cloudflare Dashboard.

PS: I found a comment by James on this very issue, but his solution was hidden by the fold of comments GitHub shows.

AlexandrNetsvetov added the bug Something isn't working label Jul 30, 2023

dario-piotrowicz self-assigned this Aug 2, 2023

AlexandrNetsvetov mentioned this issue Aug 7, 2023

feat: support choosen of vercel version #417

Closed

dario-piotrowicz mentioned this issue Aug 7, 2023

Add a workaround for the not-found app directory issue #418

Merged

2 tasks

dario-piotrowicz added the blocked by external This can't be currently solved because of external factors (Vercel/Next, Pages, etc...) label Aug 9, 2023

emrecoban mentioned this issue Aug 13, 2023

[🐛 Bug]: Dynamic routes and images don't work #428

Closed

dario-piotrowicz added the app router This issue is related to the App router label Aug 22, 2023

dario-piotrowicz mentioned this issue Dec 5, 2023

Try to fix not_found routes only when the app router is used #576

Merged

dario-piotrowicz mentioned this issue Dec 11, 2023

fix app router invalid _error functions #585

Merged

dario-piotrowicz closed this as completed in #585 Dec 13, 2023

This was referenced May 6, 2024

Cloudflare Pages build error miurla/morphic#114

Open

Fix Cloudflare Pages build error. miurla/morphic#113

Closed

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

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

Comments

AlexandrNetsvetov commented Jul 30, 2023 • edited Loading

next-on-pages environment related information

Description

Reproduction

Pages Deployment Method

Pages Deployment ID

Additional Information

Would you like to help?

BlackBerry009 commented Jul 31, 2023

dario-piotrowicz commented Jul 31, 2023

AlexandrNetsvetov commented Jul 31, 2023

dario-piotrowicz commented Jul 31, 2023

dario-piotrowicz commented Aug 1, 2023

emrecoban commented Aug 8, 2023 • edited Loading

dario-piotrowicz commented Aug 9, 2023

emrecoban commented Aug 9, 2023

dario-piotrowicz commented Aug 9, 2023

emrecoban commented Aug 9, 2023 • edited Loading

dario-piotrowicz commented Aug 9, 2023

vans163 commented Aug 10, 2023

vans163 commented Aug 10, 2023

vans163 commented Aug 10, 2023

dario-piotrowicz commented Aug 10, 2023

vans163 commented Aug 10, 2023

emrecoban commented Aug 10, 2023 • edited Loading

vans163 commented Aug 10, 2023

emrecoban commented Aug 10, 2023

vans163 commented Aug 10, 2023

vans163 commented Aug 10, 2023

vans163 commented Aug 10, 2023 • edited Loading

wuifdesign commented Aug 25, 2023 • edited Loading

always-maap commented Dec 9, 2023

dario-piotrowicz commented Dec 11, 2023

w33ts commented Dec 11, 2023

dario-piotrowicz commented Dec 13, 2023 • edited Loading

nikitaeverywhere commented Dec 29, 2023

xanderim commented Dec 30, 2023

dario-piotrowicz commented Dec 30, 2023

nikitaeverywhere commented Dec 31, 2023

dario-piotrowicz commented Jan 1, 2024

nikitaeverywhere commented Jan 1, 2024

dario-piotrowicz commented Jan 1, 2024 • edited Loading

anonymouscatcher commented Mar 4, 2024

switz commented May 24, 2024

cameron-eth commented May 25, 2024

AlecKriebel commented Jun 23, 2024

DeJayDev commented Jun 27, 2024 • edited Loading

AlexandrNetsvetov commented Jul 30, 2023 •

edited

Loading

emrecoban commented Aug 8, 2023 •

edited

Loading

emrecoban commented Aug 9, 2023 •

edited

Loading

emrecoban commented Aug 10, 2023 •

edited

Loading

vans163 commented Aug 10, 2023 •

edited

Loading

wuifdesign commented Aug 25, 2023 •

edited

Loading

dario-piotrowicz commented Dec 13, 2023 •

edited

Loading

dario-piotrowicz commented Jan 1, 2024 •

edited

Loading

DeJayDev commented Jun 27, 2024 •

edited

Loading