Cloudflare Developers•2y ago

[Nextjs 13 App router] Routes without Edge Runtime

When building my app locally with pnpm dlx @cloudflare/next-on-pages@latest everything builds as expected, however, doing so on Cloudflare results in an error after the build has completed stating that my server components require export const runtime = "edge"; which has already been set in all of them and confirmed by the local build. I am using build system v2 though I don't believe that should impact this as I would require a newer nodejs version regardless of the underlying runner operating system (Ubuntu 20 vs 22)

9 Replies

James•2y ago

Hey there, would you be able to send your build log, please?

InBlueOP•2y ago

01:10:36.952    ⚡️ Completed `pnpx vercel build`.
01:10:41.297    ▲ [WARNING] Comparison using the "!==" operator here is always true [equals-new-object]
01:10:41.297    
01:10:41.298        <stdin>:409:220262:
01:10:41.298          409 │ ...{style:i?hC({},i,d):d};(i&&[i]!==d||!i&&l!==d)&&this.setState(...
01:10:41.298              ╵                                  ~~~
01:10:41.298    
01:10:41.299      Equality with a new object is always false in JavaScript because the equality operator tests object identity. You need to write code to compare the contents of the object instead. For example, use "Array.isArray(x) && x.length === 0" instead of "x === []" to test for an empty array.
01:10:41.299    
01:10:42.055    ▲ [WARNING] Comparison using the "!==" operator here is always true [equals-new-object]
01:10:42.055    
01:10:42.056        <stdin>:409:220262:
01:10:42.056          409 │ ...{style:i?hC({},i,d):d};(i&&[i]!==d||!i&&l!==d)&&this.setState(...
01:10:42.056              ╵                                  ~~~
01:10:42.056    
01:10:42.056      Equality with a new object is always false in JavaScript because the equality operator tests object identity. You need to write code to compare the contents of the object instead. For example, use "Array.isArray(x) && x.length === 0" instead of "x === []" to test for an empty array.
01:10:42.056    
01:10:45.712    
01:10:45.712    ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
01:10:45.712    ⚡️ 
01:10:45.712    ⚡️     The following routes were not configured to run with the Edge Runtime:
01:10:45.713    ⚡️       - en/app/a
01:10:45.713    ⚡️       - en/app/b
01:10:45.713    ⚡️       - en/app/c
01:10:45.713    ⚡️       - en/app
01:10:45.713    ⚡️       - en/auth
01:10:45.713    ⚡️       - en
01:10:45.713    ⚡️ 
01:10:45.714    ⚡️     Please make sure that all your non-static routes export the following edge runtime route segment config:
01:10:45.714    ⚡️       export const runtime = 'edge';
01:10:45.714    ⚡️ 
01:10:45.714    ⚡️     You can read more about the Edge Runtime on the Next.js documentation:
01:10:45.714    ⚡️       https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
01:10:45.714    
01:10:45.727     ERROR  Command failed with exit code 1: next-on-pages
01:10:45.728    
01:10:45.728    pnpm: Command failed with exit code 1: next-on-pages
01:10:45.728        at makeError (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:24241:17)
01:10:45.729        at handlePromise (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:24812:33)
01:10:45.729        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
01:10:45.729        at async Object.handler [as dlx] (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:206955:7)
01:10:45.729        at async /opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216361:21
01:10:45.729        at async main (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216328:34)
01:10:45.729        at async runPnpm (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216583:5)
01:10:45.729        at async /opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216575:7
01:10:49.624    Failed: Error while executing user command. Exited with error code: 1
01:10:49.635    Failed: build command exited with code: 1
01:10:50.679    Failed: error occurred while running build command

01:10:36.952    ⚡️ Completed `pnpx vercel build`.
01:10:41.297    ▲ [WARNING] Comparison using the "!==" operator here is always true [equals-new-object]
01:10:41.297    
01:10:41.298        <stdin>:409:220262:
01:10:41.298          409 │ ...{style:i?hC({},i,d):d};(i&&[i]!==d||!i&&l!==d)&&this.setState(...
01:10:41.298              ╵                                  ~~~
01:10:41.298    
01:10:41.299      Equality with a new object is always false in JavaScript because the equality operator tests object identity. You need to write code to compare the contents of the object instead. For example, use "Array.isArray(x) && x.length === 0" instead of "x === []" to test for an empty array.
01:10:41.299    
01:10:42.055    ▲ [WARNING] Comparison using the "!==" operator here is always true [equals-new-object]
01:10:42.055    
01:10:42.056        <stdin>:409:220262:
01:10:42.056          409 │ ...{style:i?hC({},i,d):d};(i&&[i]!==d||!i&&l!==d)&&this.setState(...
01:10:42.056              ╵                                  ~~~
01:10:42.056    
01:10:42.056      Equality with a new object is always false in JavaScript because the equality operator tests object identity. You need to write code to compare the contents of the object instead. For example, use "Array.isArray(x) && x.length === 0" instead of "x === []" to test for an empty array.
01:10:42.056    
01:10:45.712    
01:10:45.712    ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
01:10:45.712    ⚡️ 
01:10:45.712    ⚡️     The following routes were not configured to run with the Edge Runtime:
01:10:45.713    ⚡️       - en/app/a
01:10:45.713    ⚡️       - en/app/b
01:10:45.713    ⚡️       - en/app/c
01:10:45.713    ⚡️       - en/app
01:10:45.713    ⚡️       - en/auth
01:10:45.713    ⚡️       - en
01:10:45.713    ⚡️ 
01:10:45.714    ⚡️     Please make sure that all your non-static routes export the following edge runtime route segment config:
01:10:45.714    ⚡️       export const runtime = 'edge';
01:10:45.714    ⚡️ 
01:10:45.714    ⚡️     You can read more about the Edge Runtime on the Next.js documentation:
01:10:45.714    ⚡️       https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
01:10:45.714    
01:10:45.727     ERROR  Command failed with exit code 1: next-on-pages
01:10:45.728    
01:10:45.728    pnpm: Command failed with exit code 1: next-on-pages
01:10:45.728        at makeError (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:24241:17)
01:10:45.729        at handlePromise (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:24812:33)
01:10:45.729        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
01:10:45.729        at async Object.handler [as dlx] (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:206955:7)
01:10:45.729        at async /opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216361:21
01:10:45.729        at async main (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216328:34)
01:10:45.729        at async runPnpm (/opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216583:5)
01:10:45.729        at async /opt/buildhome/.cache/node/corepack/pnpm/8.6.1/dist/pnpm.cjs:216575:7
01:10:49.624    Failed: Error while executing user command. Exited with error code: 1
01:10:49.635    Failed: build command exited with code: 1
01:10:50.679    Failed: error occurred while running build command

Everything before this looks like normal logs from next-on-pages and a warning from a library The logs indicate that the routes listed don't have the required export but they do, I checked the commit from which it was built and it exists in there and also builds locally so I am just a little confused

James•2y ago

That is very strange indeed if your route has actually opted into the edge runtime and it builds locally. Would it be at all possible for you to create a repository where this behaviour can be reproduced?

InBlueOP•2y ago

I will give it a go and see, would you mind if I ping you here when that is done?

James•2y ago

i don't mind, I'll see the message either way 😛

InBlueOP•2y ago

Alright, https://github.com/InBlue/cf-next13-build-issue this is a super simple repo but the same thing happens, works building locally but not in cloudflare

GitHub

GitHub - InBlue/cf-next13-build-issue

Contribute to InBlue/cf-next13-build-issue development by creating an account on GitHub.

James•2y ago

Thank you. Ah, next.config.js option for i18n. Yeah... The config-level internationalization option has been really problematic for us - the build that Next/Vercel produces for it often generates invalid functions that it probably shouldn't have. It has caused many issues in our testing that I have tried to account for, but then another one pops up around the corner. For me, the build with that repo fails locally because of nextjs/vercel generating invalid functions for the en locale that we can't use. Would it be possible for you to use an alternative approach to internationalization? In the app directory, the recommended way is to use middleware + a dynamic [lang] at the root of your app instead - Next.js are actually trying to move away from people using the config i18n option with the app directory. https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview

InBlueOP•2y ago

Oh, that is so simple! I will try removing that option to see if it builds as I expect. I am not using it at all right now, just was planning for the future so I can use whatever is most recommended anyway Awesome!! That has fixed it! Such a simple fix which is great for me! Thank you so much

James•2y ago

Glad to hear 🙂

Gaming

Programming

[Nextjs 13 App router] Routes without Edge Runtime

Did you find this page helpful?