dompurify maybe? - Cloudflare Developers

© 2026 Hedgehog Software, LLC

More

Communities Docs About Terms Privacy

villainy

V

villainy•7/11/24, 3:57 PM

Anyone gotten this error before?

17:56:34.326    ▲  Module not found: Can't resolve '@/app/components/sidebar/App'
17:56:34.326    ▲    1 | "use client";
17:56:34.327    ▲    2 |
17:56:34.327    ▲  > 3 | import Sidebar from "@/app/components/sidebar/App";
17:56:34.327    ▲      | ^
17:56:34.327    ▲    4 | import { usePathname } from "next/navigation";
17:56:34.328    ▲    5 |
17:56:34.328    ▲    6 | export default function BackendLayout({
17:56:34.328    ▲  
17:56:34.328    ▲  https://nextjs.org/docs/messages/module-not-found

17:56:34.326    ▲  Module not found: Can't resolve '@/app/components/sidebar/App'
17:56:34.326    ▲    1 | "use client";
17:56:34.327    ▲    2 |
17:56:34.327    ▲  > 3 | import Sidebar from "@/app/components/sidebar/App";
17:56:34.327    ▲      | ^
17:56:34.327    ▲    4 | import { usePathname } from "next/navigation";
17:56:34.328    ▲    5 |
17:56:34.328    ▲    6 | export default function BackendLayout({
17:56:34.328    ▲  
17:56:34.328    ▲  https://nextjs.org/docs/messages/module-not-found

villainy

V

villainy•7/11/24, 3:58 PM

after renaming some files/folder, it causes this when deploying

villainy

V

villainy•7/11/24, 3:58 PM

error doesnt occur when building or running localy

villainy

V

villainy•7/11/24, 3:58 PM

and dont have any build cache

villainy

V

villainy•7/11/24, 4:03 PM

right, git dosent track the folder name rename

villainy

V

villainy•7/11/24, 4:04 PM

linked: https://github.com/cloudflare/next-on-pages/issues/761

villainy

V

villainy•7/11/24, 4:11 PM

Screenshot_2024-07-11_at_18.11.27.png

James

J

JamesOP•7/11/24, 5:50 PM

akoalathink

James

JJames dompurify maybe?

Donnager

D

Donnager•7/11/24, 6:50 PM

good call, i can't remember why i didn't go with dompurifydompurify, but definitely will give it a go if sanitize-htmlsanitize-html doesn't workout!

Cat Socks

C

Cat Socks•7/11/24, 8:41 PM

Does anyone have a working example of D1 + next-on-pages for both local dev and production?

Matthew

M

Matthew•7/11/24, 8:59 PM

what do you guys use for payment processing on C3 setup? stripe is giving a lot of failures in production worker env

Cat Socks

CCat Socks Does anyone have a working example of D1 + next-on-pages for both local dev and ...

James

J

JamesOP•7/12/24, 8:23 AM

You can use the next-dev sub-module for local development, and then you should be able to use the same binding from prod and dev via process.env.BINDING_NAME.
https://github.com/cloudflare/next-on-pages/tree/main/internal-packages/next-dev

Sheng

S

Sheng•7/12/24, 2:06 PM

Hi guys, has anyone managed to deploy with react-email/tailwind? having error: workers.api.error.script_too_largeworkers.api.error.script_too_large

James

J

JamesOP•7/12/24, 2:42 PM

If you're on the free plan, you might be hitting the 1mb limit. This can often happen due to chonky dependencies, or you just have a lot of SSR'd routes. You couly upgrade to Workers Paid for a higher limit

certified dirtiboi

C

certified dirtiboi•7/12/24, 7:59 PM

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.

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!

wilburpowery

W

wilburpowery•7/12/24, 8:53 PM

Howdy folks. I have a Next.js project on Cloudflare have have a src/pages/api/signup.jssrc/pages/api/signup.js api route that uses fetch to do a POST request to another app. When deploying it, the build failed and I needed to add the export const config = { runtime: 'experimental-edge' };export const config = { runtime: 'experimental-edge' }; export to the api function

wilburpowery

W

wilburpowery•7/12/24, 8:54 PM

This seems to be breaking the function though. req, resreq, res which are the parameters passed into the handlerhandler function don't work. The

fetch

fetch

API doesn't respect the methodmethod parameter I set and is still just doing a GETGET request.

wilburpowery

W

wilburpowery•7/12/24, 8:54 PM

Any tips on debugging/fixing this?

wilburpowery

Wwilburpowery Howdy folks. I have a Next.js project on Cloudflare have have a `src/pages/api/s...

faye

F

faye•7/13/24, 4:15 PM

it should be export const runtime = 'edge'export const runtime = 'edge'

faye

F

faye•7/13/24, 4:16 PM

Also hey guys!

I got an issue using turborepo.
When building locally, it works fine, however when building on CF Pages, I get this:

faye

F

faye•7/13/24, 4:16 PM

Where in my apps/db_web package.json, I have this script: "pages:build": "npx @cloudflare/next-on-pages""pages:build": "npx @cloudflare/next-on-pages"

faye

F

faye•7/13/24, 4:16 PM

faye

Ffaye it should be `export const runtime = 'edge'`

wilburpowery

W

wilburpowery•7/13/24, 6:06 PM

I tried “edge” but the build failed and said only “experimental-edge” or “nodejs” were valid runtimes

wilburpowery

Wwilburpowery I tried “edge” but the build failed and said only “experimental-edge” or “nodejs...

faye

F

faye•7/13/24, 6:07 PM

What nextjs version do you use?

faye

Ffaye What nextjs version do you use?

wilburpowery

W

wilburpowery•7/13/24, 6:08 PM

This project was on 13.0.x but I then updated it to be on the exact version mention in the README in the next-on-pages repo.

faye

F

faye•7/13/24, 6:08 PM

so 14+?

faye

F

faye•7/13/24, 6:09 PM

I don't know what version the repo says. But I am using the latest 14.2.5, and that works fine.

wilburpowery

W

wilburpowery•7/13/24, 6:13 PM

Interesting. And do you happen to have api functions that use the fetch api to do a POST request?

wilburpowery

W

wilburpowery•7/13/24, 6:13 PM

I’ll try to upgrade the project to see if it works

wilburpowery

W

wilburpowery•7/13/24, 6:13 PM

Thank you!

certified dirtiboi

Ccertified dirtiboi Hello Cloudflare community, I'm encountering an intermittent error in my Next.js...

James

J

JamesOP•7/13/24, 6:26 PM

Wouldnt be able to tell without some sort of reproduction to play around with

wilburpowery

Wwilburpowery This seems to be breaking the function though. `req, res` which are the paramete...

James

J

JamesOP•7/13/24, 6:28 PM

That is not the format for edge api routes. You should consider using Next.js app directory route handlers instead as they function across both nodejs and edge runtime without needing changes, whereas the pages router has two different formats for edge vs nodejs
https://nextjs.org/docs/app/building-your-application/routing/route-handlers

wilburpowery

Wwilburpowery Interesting. And do you happen to have api functions that use the fetch api to d...

faye

F

faye•7/13/24, 8:04 PM

https://github.com/Headpat-Community/headpat.de/blob/main/src/app/api/user/signin/route.ts#L5

faye

Ffaye Also hey guys! I got an issue using turborepo. When building locally, it works ...

faye

F

faye•7/13/24, 11:33 PM

Hey @James, unsure if you over-read my message. Would you be able to help?

faye

Ffaye Hey <@94508156243161088>, unsure if you over-read my message. Would you be able ...

James

J

JamesOP•7/14/24, 9:29 AM

Looks like something might not be configured correctly. Might be related to the wrong nodejs version. Might be that the package name is wrong. Not sure - I don't use turborepo

faye

F

faye•7/14/24, 9:29 AM

Hmm.. i'll try :/

faye

F

faye•7/14/24, 9:44 AM

still broken :(

James

J

JamesOP•7/14/24, 11:07 AM

I can only assume that turborepo isn't able to find a project with that name in your repo

faye

F

faye•7/14/24, 11:10 AM

Ah I found the issue! It seems that I forgot about changing the name in the package.json to @apps/db_web as well, so the filter actually works

James

J

JamesOP•7/14/24, 11:11 AM

Haha nice

arch

A

arch•7/14/24, 3:35 PM

https://davidgomes.com/the-experience-of-deploying-next-js-apps-on-cloudflare/

David Gomes

The Experience of Deploying Next.js Apps on Cloudflare

I recently went through the process of deploying various small Next.js applications to Cloudflare. As part of working on a new command called "neonctl create-app", we built a way to automatically deploy Next.js full-stack apps (i.e., Next.js apps with a backend+frontend) to both Cloudflare and

esselungo

E

esselungo•7/14/24, 5:44 PM

where can i put the _redirects file in a nextjs app? https://developers.cloudflare.com/pages/configuration/redirects/

Cloudflare Docs

Redirects · Cloudflare Pages docs

To use redirects on Cloudflare Pages, declare your redirects in a plain text file called _redirects without a file extension, in the output folder of …

wilburpowery

Wwilburpowery Thank you!

!EXPER

!

!EXPER•7/15/24, 6:15 AM

did you solve the problem?

xianyun88

X

xianyun88•7/15/24, 3:03 PM

I am unable to access the d1 database properly when running the CloudFlare Pages project locally using npm run preview,
I have added it to the wrangler.toml file
[[env.preview.d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "mydb_local"
database_id = "7926ce2e-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
But when using drizzle to access the database, it prompts that the table does not exist

esselungo

Eesselungo where can i put the _redirects file in a nextjs app? https://developers.cloudfla...

James

J

JamesOP•7/16/24, 7:26 AM

you can move stuff to your output directory after building if you wish

kika

K

kika•7/17/24, 1:18 AM

Hi, the worker local development doesn't support running a queue producer and consumer in separate workers and it's advised in the doc to put them temporarily in one file. I'm sending a message from the Server Action, but where can I put the consumer

export default { async queue(....) { .... } }

export default { async queue(....) { .... } }

?

esselungo

Eesselungo where can i put the _redirects file in a nextjs app? https://developers.cloudfla...

Deo Kumar

D

Deo Kumar•7/18/24, 12:54 PM

I put it in public folder

LEU

L

LEU•7/19/24, 7:40 AM

I having this git action deployment fail.

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

build error

LibsqlError: URL_INVALID: The URL 'undefined' is not in a valid format

LibsqlError: URL_INVALID: The URL 'undefined' is not in a valid format

The reason is

process.env.TURSO_DATABASE_URL

process.env.TURSO_DATABASE_URL

is

undefiend

undefiend

during the build. It successes when I tried to set

[env.production.vars]

[env.production.vars]

in

wrangler.toml

wrangler.toml

.

Is there anyway to load production env from Dashboard instead of

wrangler.toml

wrangler.toml

?

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

// prisma.ts
import { PrismaClient } from "@prisma/client";
import { PrismaLibSQL } from "@prisma/adapter-libsql";
import { createClient } from "@libsql/client";

let prisma: PrismaClient;
const libsql = createClient({
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
});
export const prisma = new PrismaClient({ adapter });

17:56:34.326    ▲  Module not found: Can't resolve '@/app/components/sidebar/App'
17:56:34.326    ▲    1 | "use client";
17:56:34.327    ▲    2 |
17:56:34.327    ▲  > 3 | import Sidebar from "@/app/components/sidebar/App";
17:56:34.327    ▲      | ^
17:56:34.327    ▲    4 | import { usePathname } from "next/navigation";
17:56:34.328    ▲    5 |
17:56:34.328    ▲    6 | export default function BackendLayout({
17:56:34.328    ▲  
17:56:34.328    ▲  https://nextjs.org/docs/messages/module-not-found

17:56:34.326    ▲  Module not found: Can't resolve '@/app/components/sidebar/App'
17:56:34.326    ▲    1 | "use client";
17:56:34.327    ▲    2 |
17:56:34.327    ▲  > 3 | import Sidebar from "@/app/components/sidebar/App";
17:56:34.327    ▲      | ^
17:56:34.327    ▲    4 | import { usePathname } from "next/navigation";
17:56:34.328    ▲    5 |
17:56:34.328    ▲    6 | export default function BackendLayout({
17:56:34.328    ▲  
17:56:34.328    ▲  https://nextjs.org/docs/messages/module-not-found

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.

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.