do you have a favicon.ico inside app dir? if so, move it to a public dir instead

JJames do you have a favicon.ico inside app dir? if so, move it to a public dir instead

V

villainy•7/9/24, 4:42 PM

yeah but why would it out of the blue fail deployment.

V

villainy•7/9/24, 4:43 PM

when i never updated any package

V

villainy•7/9/24, 4:43 PM

CF doing changes it prod that breaks our app?

J

JamesOP•7/9/24, 4:49 PM

You know we don't generate that function. It's the Vercel/Next CLIs that wrongly generate an ISR function for a favicon.ico file placed inside the app directory instead of just moving it to the static assets directory

J

JamesOP•7/9/24, 4:50 PM

If they didn't, it wouldn't be an issue and it would be treated like the static asset that it is

. So you should put it in the public dir instead of the app dir

JJames do you have a favicon.ico inside app dir? if so, move it to a public dir instead

M

Matthew•7/9/24, 11:07 PM

this fixed it for me. but just fyi the standard npm create cloudflare@latest framework next will fail build until you make this change.

J

JamesOP•7/10/24, 12:11 AM

ugh

J

JamesOP•7/10/24, 12:11 AM

i just saw someone made an issue for it as well and it's because of a new vercel cli release

J

JamesOP•7/10/24, 12:11 AM

will make a pr to try and account for it

C

Cat Socks•7/10/24, 1:26 AM

import { EmailMessage } from "cloudflare:email";
import { createMimeMessage } from "mimetext";

export default {
 async fetch(request, env) {
   const msg = createMimeMessage();
   msg.setSender({ name: "GPT-4", addr: "<SENDER>@example.com" });
   msg.setRecipient("<RECIPIENT>@example.com");
   msg.setSubject("An email generated in a worker");
   msg.addMessage({
       contentType: 'text/plain',
       data: `Congratulations, you just sent an email from a worker.`
   });

   var message = new EmailMessage(
     "<SENDER>@example.com",
     "<RECIPIENT>@example.com",
     msg.asRaw()
   );
   try {
     await env.SEB.send(message);
   } catch (e) {
     return new Response(e.message);
   }

   return new Response("Hello Send Email World!");
 },
};

import { EmailMessage } from "cloudflare:email";
import { createMimeMessage } from "mimetext";

export default {
 async fetch(request, env) {
   const msg = createMimeMessage();
   msg.setSender({ name: "GPT-4", addr: "<SENDER>@example.com" });
   msg.setRecipient("<RECIPIENT>@example.com");
   msg.setSubject("An email generated in a worker");
   msg.addMessage({
       contentType: 'text/plain',
       data: `Congratulations, you just sent an email from a worker.`
   });

   var message = new EmailMessage(
     "<SENDER>@example.com",
     "<RECIPIENT>@example.com",
     msg.asRaw()
   );
   try {
     await env.SEB.send(message);
   } catch (e) {
     return new Response(e.message);
   }

   return new Response("Hello Send Email World!");
 },
};

import { EmailMessage } from "cloudflare:email";
import { createMimeMessage } from "mimetext";

export default {
 async fetch(request, env) {
   const msg = createMimeMessage();
   msg.setSender({ name: "GPT-4", addr: "<SENDER>@example.com" });
   msg.setRecipient("<RECIPIENT>@example.com");
   msg.setSubject("An email generated in a worker");
   msg.addMessage({
       contentType: 'text/plain',
       data: `Congratulations, you just sent an email from a worker.`
   });

   var message = new EmailMessage(
     "<SENDER>@example.com",
     "<RECIPIENT>@example.com",
     msg.asRaw()
   );
   try {
     await env.SEB.send(message);
   } catch (e) {
     return new Response(e.message);
   }

   return new Response("Hello Send Email World!");
 },
};

import { EmailMessage } from "cloudflare:email";
import { createMimeMessage } from "mimetext";

export default {
 async fetch(request, env) {
   const msg = createMimeMessage();
   msg.setSender({ name: "GPT-4", addr: "<SENDER>@example.com" });
   msg.setRecipient("<RECIPIENT>@example.com");
   msg.setSubject("An email generated in a worker");
   msg.addMessage({
       contentType: 'text/plain',
       data: `Congratulations, you just sent an email from a worker.`
   });

   var message = new EmailMessage(
     "<SENDER>@example.com",
     "<RECIPIENT>@example.com",
     msg.asRaw()
   );
   try {
     await env.SEB.send(message);
   } catch (e) {
     return new Response(e.message);
   }

   return new Response("Hello Send Email World!");
 },
};

Has anyone been able to bind email workers to an next on pages api route?

P

powermikee1•7/10/24, 3:04 AM

Hi guys has anyone managed to get durable objects running with next pages?

First i get an error mentioning migrations. Then it requires a worker name which is usually auto generated.

Any help would be awesome.

D

Donnager•7/10/24, 3:58 PM

n00b Q: when navigating

workers.api.error.script_too_large

workers.api.error.script_too_large

workers.api.error.script_too_large

workers.api.error.script_too_large the idea is that the

_worker.js

_worker.js

~~file~~ *folder in

output/static/

output/static/

output/static/

output/static/ should be less than 1mib (free) or less than how much for paid? the workers documentation says 10mib, and in pages it says 25mib but i think thats referencing static assets only. in discord i have seen conversations referencing 5mib

is it safest to check the

_worker.js

_worker.js

folder or to check the

/output/static/

/output/static/

/output/static/

/output/static/ folder itself (minus what is excluded from

_routes.json

_routes.json

_routes.json

_routes.json ?

J

JamesOP•7/10/24, 4:23 PM

zipped _worker.js

JJames zipped _worker.js

D

Donnager•7/10/24, 4:51 PM

ohhh okay thank you for the tip, will definitely zip to test, also do you know if we want to be under 5 or 10?

J

JamesOP•7/10/24, 5:44 PM

i think the limit was 25mb but i cant remember exactly

JJames i _think_ the limit was 25mb but i cant remember exactly

D

Donnager•7/10/24, 5:56 PM

ohhh wow, 25 would be amazing if thats the limit!

D

Donnager•7/10/24, 5:58 PM

also n00b Q: for sanitizing HTML does anyone have any recs on* for next-on-pages / workers? i tested a deploy of

sanitize-html

sanitize-html

sanitize-html

sanitize-html and it happy path works, but in github, this user says it has issues: https://github.com/apostrophecms/sanitize-html/issues/639#issuecomment-1992159751, if anyone has a preferred lib super open to any suggestions

GitHub

Browser console warnings with React and Vite · Issue #639 · apostro...

The problem to solve Lots of console warnings are being logged since adding sanitize-html to a React application running with vite. This is details about the warning we are seeing. https://vitejs.d...

J

JamesOP•7/11/24, 2:13 PM

dompurify maybe?

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

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

V

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

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

V

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

error doesnt occur when building or running localy

V

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

and dont have any build cache

V

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

right, git dosent track the folder name rename

V

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

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

V

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

J

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

JJames dompurify maybe?

D

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

good call, i can't remember why i didn't go with

dompurify

dompurify

dompurify

dompurify, but definitely will give it a go if

sanitize-html

sanitize-html

sanitize-html

sanitize-html doesn't workout!

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?

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

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

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

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_large

workers.api.error.script_too_large

workers.api.error.script_too_large

workers.api.error.script_too_large

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

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.

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!

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.js

src/pages/api/signup.js

src/pages/api/signup.js

src/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 const config = { runtime: 'experimental-edge' };

export const config = { runtime: 'experimental-edge' }; export to the api function

W

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

This seems to be breaking the function though.

req, res

req, res

req, res

req, res which are the parameters passed into the

handler

handler

function don't work. The

fetch

fetch

API doesn't respect the

method

method

method

method parameter I set and is still just doing a

GET

GET

GET

GET request.

W

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

Any tips on debugging/fixing this?

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

F

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

it should be

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

export const runtime = 'edge'

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:

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"

"pages:build": "npx @cloudflare/next-on-pages"

"pages:build": "npx @cloudflare/next-on-pages"

F

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

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

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

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

F

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

What nextjs version do you use?

Ffaye What nextjs version do you use?

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.

F

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

so 14+?

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.

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?

W

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

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

W

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

Thank you!

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

J

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

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

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

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

do you have a favicon.ico inside app dir? if so, move it to a public dir instead

Similar Threads

Similar Threads

Similar Threads