CD
Cloudflare Developers•17mo ago
InBlue

[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
James•17mo ago
Hey there, would you be able to send your build log, please?
InBlue
InBlueOP•17mo 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
James•17mo 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?
InBlue
InBlueOP•17mo ago
I will give it a go and see, would you mind if I ping you here when that is done?
James
James•17mo ago
i don't mind, I'll see the message either way 😛
InBlue
InBlueOP•17mo 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
James•17mo 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
InBlue
InBlueOP•17mo 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
James•17mo ago
Glad to hear 🙂
Want results from more Discord servers?
Add your server