Hello Cloudflare community,
Hello Cloudflare community,
I'm encountering an intermittent error in my Next.js application deployed on Cloudflare Workers (next-on-pages). The error occurs in various environments and states:
Error: Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope. To fix this error, perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/
Full stack trace varies depending on when the error occurred, but it typically involves files in the .vercel/output/static/_worker.js directory.
The nature of the error:
Occurs sporadically
Doesn't consistently happen on the same user action
Sometimes occurs when the user signs out
Other times happens when navigating to a different route via side nav
What I've tried:
Reviewed code to ensure async operations are within handlers
Checked middleware and API routes for top-level async operations
Verified next.config.mjs setup for Cloudflare Workers
Ensured fetch calls in components are within useEffect hooks or event handlers
System info:
OS: Linux 6.5 Debian GNU/Linux 12 (bookworm)
Node: 22.4.0
npm: 10.8.1
pnpm: 9.5.0
Key npm packages:
@clerk/nextjs: ^5.1.5
@Cloudflare/next-on-pages: ^1.11.3
@Cloudflare/workers-types: ^4.20240605.0
next: ^14.2.4
react: ^18
react-dom: ^18
typescript: ^5
wrangler: ^3.60.2
Questions:
Are there known issues with Next.js on Cloudflare Workers causing this intermittent error?
Given the sporadic nature, what debugging strategies would you recommend?
Are there specific areas in a Next.js + Cloudflare Workers setup prone to causing this type of error?
Any insights or suggestions would be greatly appreciated. Thank you for your help!7 Replies
I'm running into the same issue with the same key npm packages. Were you able to figure out the issue? It is intermittent and happens on any route.
My best is that prefetch on links is the cause nevermind - it is just something with react server component rendering. Struggling to find the root cause...
I upgraded to the v15 RC for nextjs and react 19 (with react-compiler enabled) and haven't seen the issue again - worth trying to see if it solves it for you too. Here's my versions:
Note that
@clerk/nextjs > 5.2 causes deploy errors with function being > 1MB@sochrisp Yes, to clarify, I still see this error intermittently. Based on my debugging, it has occurred on every one of my routes at one point or another, but it seems to occur most often when signing out of my app. Sometimes I can go a full day or two without seeing it and then the next day it happens a bunch.
Interesting that upgrading react and Next.js has resolved it for you - maybe it's a caching related issue (my best guess).
Unfortunately, I'm really hesitant to do those upgrades since my app is live in production and since next 15 is not quite stable yet (at least in my opinion)
Thanks for the feedback though!
It was happening with a lot of regularity for me and since upgrading I haven’t ran into it at all!
Totally understand the hesitancy if you are live with user haha if you end up figuring out the problem please update here!
will do
@sochrisp My users are seeing the 500 a bunch the past few days so I'm attempting to upgrade to Ract 19 and Next.js 15 🙂
Are you using tanstack by chance? I'm facing a peer dependency issue when building and deploying that seems to be caused by a react 18 dependency by tanstack:
12:03:05.212 npm ERR! Could not resolve dependency:
12:03:05.213 npm ERR! peer react@">=16.8" from @tanstack/react-table@8.19.3
12:03:05.213 npm ERR! node_modules/@tanstack/react-table
12:03:05.213 npm ERR! @tanstack/react-table@"^8.19.3" from the root project
12:03:05.213 npm ERR!
12:03:05.213 npm ERR! Conflicting peer dependency: react@18.3.1
12:03:05.213 npm ERR! node_modules/react
12:03:05.213 npm ERR! peer react@">=16.8" from @tanstack/react-table@8.19.3
12:03:05.213 npm ERR! node_modules/@tanstack/react-table
12:03:05.214 npm ERR! @tanstack/react-table@"^8.19.3" from the root project
12:03:05.214 npm ERR!
12:03:05.214 npm ERR! Fix the upstream dependency conflict, or retry
12:03:05.214 npm ERR! this command with --force or --legacy-peer-deps
12:03:05.214 npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Unfortunately I’m not, but their docs (https://tanstack.com/table/latest/docs/installation) say it works with React 19 but may not work the new compiler.
I would try using
—force or —legacy-peer-deps, unlikely to cause an issue if you don’t enable the compiler to be on the safe sideInstallation | TanStack Table Docs
Before we dig in to the API, let's get you set up!
Install your table adapter as a dependency using your favorite npm package manager.
Okay so I got it working. I originally was using --force in my local instance but couldn't get it to work when building my application using wrangler (pages). I had to add some additional logic to ignore these warning when running the build with wrangler locally or remotely.
I have been testing my production instance (next 14 & React 18) and my preview instance (next 15 & react 19) and I don't see the errors in my preview branch but see it quite often in my production instance.
I'll continue to test, and hope to be able to push to production in the coming days.
Thanks for all the help!
Awesome! Sounds like you’re having a similar experience as me - glad it’s working for you!