Need some help to understand this issue. So I started my next.js project with the pre-configured sc

Need some help to understand this issue.
So I started my next.js project with the pre-configured script

npm create cloudflare@latest -- my-next-app --framework=next

npm create cloudflare@latest -- my-next-app --framework=next

npm create cloudflare@latest -- my-next-app --framework=next

npm create cloudflare@latest -- my-next-app --framework=next

Using radix-theme for the UI, but during build I get

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

> next build

  ▲ Next.js 14.2.5

Attempted import error: 'flushSync' is not exported from 'react-dom' (imported as 'ReactDOM').

Import trace for requested module:
./node_modules/@radix-ui/react-primitive/dist/index.mjs
./node_modules/@radix-ui/react-aspect-ratio/dist/index.mjs
./node_modules/@radix-ui/themes/dist/esm/components/aspect-ratio.js
./node_modules/@radix-ui/themes/dist/esm/components/index.js
./node_modules/@radix-ui/themes/dist/esm/index.js
./app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2F_not-found%2Fpage&page=%2F_not-found%2Fpage&pagePath=private-next-app-dir%2Fnot-found.tsx&appDir=C%3A%5CUsers%5CSHREYAS%5CDesktop%5Cktc-website%5Capp&appPaths=%2Fnot-found&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/not-found.tsx?__next_edge_ssr_entry__


> Build failed because of webpack errors

Any help to resolve this issue will be highly appreciated

DDalist Is there a way you guys could add more node options within settings presets? als...

James•9/21/24, 12:28 PM

you can set BUN_VERSIONBUN_VERSION env var to override the bun version

Ttrace Need some help to understand this issue. So I started my next.js project with t...

James•9/21/24, 12:28 PM

i would recommend opening an issue in radix since it seems to come from there

JJames i would recommend opening an issue in radix since it seems to come from there

traceOP•9/21/24, 1:24 PM

Appreciate the response @James will do that now

Ttrace Need some help to understand this issue. So I started my next.js project with t...

Oreki•9/21/24, 3:24 PM

I suppose this is happening when you try to change your layout/page's runtime to edge? If so then just create a page.client.tsx file and export every single component from that file using 'use client''use client' after that do all the server stuff in page.tsx and it should work

JJames you can set `BUN_VERSION` env var to override the bun version

Dalist•9/21/24, 4:08 PM

cool, how about node version?

Dalist•9/21/24, 4:09 PM

I'm trying to migrate from Vercel, with Vercel you can set the node version from settings

Walshy•9/21/24, 4:11 PM

NODE_VERSION, .nvmrc, .node-version or package.json .engines

Dalist•9/21/24, 4:13 PM

gotcha, thnx @Walshy

Nextify•9/22/24, 2:51 AM

Hello, this is my project build size. I just want to know for the worker paid plan, is the size limit 10MB ?

NNextify Hello, this is my project build size. I just want to know for the worker paid pl...

Hello, I’m Allie!•9/22/24, 7:24 AM

Yes, though note that is the compressed limit

HHello, I’m Allie!Yes, though note that is the compressed limit

Nextify•9/22/24, 7:32 AM

thx. it looks like it has already been compressed.

NNextify thx. it looks like it has already been compressed.

Hello, I’m Allie!•9/22/24, 8:29 AM

That’s minification, not compression

James•9/22/24, 6:20 PM

it should

Llil.bighead Hey <@94508156243161088> thanks for getting back to me. I tested deploying a hel...

Kuririn•9/23/24, 10:01 AM

I have same problem, did you know what was the issue?

Kuririn•9/23/24, 11:02 AM

It's an issue with workers runtime version:
https://github.com/cloudflare/next-on-pages/issues/844

GitHub

[🐛 Bug]: Workers KV for caching fetch requests is not working · Iss...

next-on-pages environment related information System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000 CPU...

tadhglewis•9/23/24, 2:14 PM

I think this is also related: https://github.com/cloudflare/next-on-pages/issues/799

I'm going to go through the compatibility dates and see where it broke 2024-03-292024-03-29 is reported as the latest working one

GitHub

[🐛 Bug]: Next fetch caching having issues in next-on-pages@1.11.3 ·...

next-on-pages environment related information System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:17:33 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6031 CPU...

cortopy•9/23/24, 4:11 PM

hi there, trying out cloudflare pages to see if I can host a next.js app there. My application uses the cloudinary library, which in turn uses httphttp and httpshttps node modules. The server fails to start with error Module not found: Can't resolve 'http'Module not found: Can't resolve 'http' . I've configured wrangler with nodejs_compat_v2nodejs_compat_v2, but this doesn't seem to be enough.

I'm guessing the answer is no, but just in case, do cloudflare workers support or will support node http modules?

Erik Magnusson•9/23/24, 6:32 PM

am trying to publish a nextjs application. Right now it fails on the workers exceeding the size limit:

20:11:08.285

Success! Uploaded 15 files (167 already uploaded) (1.47 sec)
20:11:08.285
20:11:08.560

Upload complete!
20:11:10.880 Success: Assets published!
20:11:19.666 Error: Failed to publish your Function. Got error: Your Worker exceeded the size limit of 1 MiB. Refer to the Workers documentation (https://developers.cloudflare.com/workers/observability/errors/#errors-on-worker-upload) for more details.

I have since updgrade my account to pro and paid for the "paid" plan for the workers. But I am still getting the same error.
I have the receipts for purchasing the paid plan, but it still ask for me to upgrade in the Workers & Pages section.
If I try to buy the paid plan again, it get an error saying there were a problem when trying to updade workers.

This is now fully blocking me migrating our project to Cloudflare.

Has anyone else seen this?

EErik Magnusson am trying to publish a nextjs application. Right now it fails on the workers exc...

Chaika•9/23/24, 6:33 PM

Pro doesn't matter for size, only Workers Paid does.

If I try to buy the paid plan again, it get an error saying there were a problem when trying to updade workers.

You get an internal error? Or can you be more specific?

CChaika Pro doesn't matter for size, only Workers Paid does. > If I try to buy the paid ...

Erik Magnusson•9/23/24, 6:35 PM

Ok, thanks.

/api/v4/accounts/6fbefd7b0f8bee62eaac1059e5db2eb8/subscriptions
body: {rate_plan:{id: "workers_paid"}
ressponse: {"success":false,"errors":[{"code":1000,"message":"Internal Server Error"}]}

EErik Magnusson Ok, thanks. /api/v4/accounts/6fbefd7b0f8bee62eaac1059e5db2eb8/subscriptions bod...

Chaika•9/23/24, 6:36 PM

Thanks for the info! There's a pretty good chance this is related to https://www.cloudflarestatus.com/incidents/40wylr6fxlky as it fails with the same error on a similar endpoint with updating subscriptions

Chaika•9/23/24, 6:36 PM

Did you actually get charged for Workers Paid at all or did it just fail without charging?

CChaika Thanks for the info! There's a pretty good chance this is related to https://www...

Erik Magnusson•9/23/24, 6:37 PM

I've been charged and I can see the receipts under my account

Chaika•9/23/24, 6:37 PM

Just to clarify, I don't mean being charged for Pro plan but for Workers Paid

CChaika Just to clarify, I don't mean being charged for Pro plan but for Workers Paid

Erik Magnusson•9/23/24, 6:37 PM

Haha, yes both

Thanks for clarifying that though

Chaika•9/23/24, 6:39 PM

Well I'd wait for that incident to be over and then see. I mentioned in the escalation thread for it that error as well. It's possible you may need to billing ticket since it charged you. It seems to be all new subscriptions are broken rn

CChaika Well I'd wait for that incident to be over and then see. I mentioned in the esca...

Erik Magnusson•9/23/24, 6:41 PM

I see. I'll give it until tomorrow to see if it's fixed. Otherwise I'll look at creating a ticket.

Thanks for you quick responses

Pichou•9/24/24, 11:58 AM

Hi Cloudflare community, hope you are all great!
I have an issue when I import S3 from aws-sdk in an API route with NextJS. I can import types from "aws-sdk/clients/s3" but as soon as I import the S3 class from the same path, I can't build the project and get the error "Failed to collect page data for /api/stage"

Pichou•9/24/24, 12:09 PM

Have any of you experienced this problem with S3?

Pichou•9/24/24, 1:16 PM

Sorry, I realized the issue was with Nextjs and not next on pages. The solution was to use "@aws-sdk/client-s3" package instead of "aws-sdk"

ejcx•9/24/24, 9:14 PM

Hi, I've been stuck for a few days on a pages issue because the bundle has exceeded 25MB using next on pages. I'm not an expert, but it seems like the bundling gets bigger the more dynamic routes you have which is something that is pretty much required for most serious websites.

Has anyone found workarounds to this or ways to limit the bundle size? I don't know what to do to make the bundle smaller and if I can't (or the limit can't be increased) I'm kind of stuck and would have to migrate...

Also hi to all my old cloudflare friends! Happy birthday week

Baran•9/24/24, 11:08 PM

Do you use vercel/otel or any package that rely on it? (E.G., Sentry). If so, check this out: next-on-pages

f33r0•9/25/24, 6:24 AM

Hi! Has anyone figured out how to use domain names on another provider with pages ? Without transferring domain

JJames i would recommend opening an issue in radix since it seems to come from there

traceOP•9/25/24, 7:20 AM

Hello, @James just an update. I did open an issue with radix. Here is the link https://github.com/radix-ui/themes/issues/595 will let you know when it is fixed.

GitHub

Error while trying to use radix theme with pre-configured cloudflar...

When I tried to use Radix theme with Next.js and Cloudflare pages, during the build process I got this error Failed to compile. ./node_modules/@radix-ui/react-primitive/dist/index.mjs Attempted imp...

juanferreras•9/25/24, 2:33 PM

I wonder if now that Cache-Tag is available for non-Ent there might be a better mechanism for storage

https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/caching.md#storage-options

I guess unless tiered cache is enable on the zone (and not the default .pages.dev.pages.dev but a custom domain is used) there wouldn't really be much differences from Cache API

Erisa•9/25/24, 2:42 PM

cache tags being free doesnt change the behaviour where worker responses wont be cached unless they do it themselves with cache api

Erisa•9/25/24, 2:42 PM

cache tags can be used alongside the cache api (put the cache tag on the response you feed to cache api) and that works, but it doesnt present any better options for cache storage

EErisa cache tags being free doesnt change the behaviour where worker responses wont be...

juanferreras•9/25/24, 3:11 PM

thanks Erisa – that makes sense! I guess I was imagining it as the worker itself (https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/templates/cache/adaptor.ts) somehow leveraging Cloudflare Cache from fetch e.g. fetch(somewhereInternal, { cf: { cacheEverything: true, cacheTags: [...] })fetch(somewhereInternal, { cf: { cacheEverything: true, cacheTags: [...] }) and then exposing an internal mechanism to purge the tag/s via API.

but there are quite a few incorrect assumptions on there from my own mental model on Cloudflare Cache as you're pointing out AND how actually next-on-pages manages to make it work atm

Jjuanferreras thanks Erisa – that makes sense! I guess I was imagining it as the worker itself...

Erisa•9/25/24, 3:16 PM

the blocker from fetch based caching working here is that a worker (or pages function) cant fetch itself in a way where the fetch cache works (it wont on service bindings for example, and those dont work w/ pages anyway) unless you get a weird setup where you host on one domain that then fetches another domain, which is a tad messy and not that easy to support as part of a framework (but i guess theoretically doable)

juanferreras•9/25/24, 3:18 PM

export const SUSPENSE_CACHE_URL = 'INTERNAL_SUSPENSE_CACHE_HOSTNAME.local';export const SUSPENSE_CACHE_URL = 'INTERNAL_SUSPENSE_CACHE_HOSTNAME.local';
brb signing up for this domain and putting it on Cloudflare as free zone

thipperz•9/25/24, 8:58 PM

As for next-on-pages, is it possible to edge cache pages for non logged-in users?

advaith•9/26/24, 12:51 AM

I updated my project and started noticing "Too many subrequests" errors in prod. I made a branch and did some testing, and found that this was caused by updating next from 14.1.0 to 14.2.13 - if I go back to 14.1.0 with the same code then this error doesn't happen. is cloudflare aware of any next change that would be causing this?

Walshy•9/26/24, 1:03 AM

cc: @James @Dario

tadhglewis•9/26/24, 4:40 AM

Question for the crowd: what is the expect/your median CPU time? (Workers & Pages > project > Function metrics)

I'm curious if mine is high relatively speaking - it seems higher than Vercel but their usage dashboards are a bit difficult to use.

Also, has anyone managed to get __NEXT_ON_PAGES__KV_SUSPENSE_CACHE__NEXT_ON_PAGES__KV_SUSPENSE_CACHE working?

Aadvaith I updated my project and started noticing "Too many subrequests" errors in prod....

advaith•9/26/24, 6:35 AM

ok actually it's weirder than this

advaith•9/26/24, 6:36 AM

i noticed that for some queries in my site, it is still getting that error, even on the older next version. (all queries do the same number of subrequests, and it is much lower than 50)

advaith•9/26/24, 6:36 AM

I made a new branch at the commit I was at before today and deployed it.

advaith•9/26/24, 6:36 AM

and this new deploy, with the identical commit as a deploy from a few months ago, gets this "too many subrequests" error on some queries. the older deploy is fine

advaith•9/26/24, 6:37 AM

so something seems to have changed in how cloudflare handles these deploys, breaking my site

Need some help to understand this issue. So I started my next.js project with the pre-configured sc

Similar Threads

Similar Threads

Similar Threads