Hey <@94508156243161088> ! I havent double checked, but I'm assuming it generates Pages functions, n

LH · 2024-07-08T18:22:39.823Z

Hey ! I havent double checked, but I'm assuming it generates Pages functions, not pure Workers (because it's hosted as Pages, not Workers on Cloudflare). Is that the case? Pages support is substantially less than Workers on Cloudflare, for example, it does not support `logpush` (https://community.cloudflare.com/t/logpush-support/597684) or `cron`. Discovered this when I tried to add `logpush=true` to the `wrangler.yaml` file. So my question is essentially around how to deploy my app that uses `next-on-pages` directly as a Workers app on CF, instead of a Pages app so that I can use `logpush` 😃

LLH Hey <@94508156243161088> ! I havent double checked, but I'm assuming it generate...

J

James•7/8/24, 6:30 PM

It's what Pages functions refers to as an advanced mode, although it's actually just a regular worker way of doing things.

If you wanted to deploy your nextjs app as a completely normal worker (which doesnt sound like the best idea to me), you'll need to come up with a way to manage how you would still expose assets to env.ASSETS.fetch('/{assetPath}'). You'll also end up getting billed a lot more since the _next/static files will all have worker invocations, and you're going to be paying for either KV or R2 to store and serve all your site's assets.

Doesn't sound very fun. You're essentially going to be operating what used to be referred to as a Workers Sites deployment. Something Cloudflare have been trying to discourage and get away from people doing, and to instead use Pages.

You could still have a worker for crons that is separate to your nextjs app. You could also modify the worker file created by next-on-pages to capture logs and dispatch them to a queue or something if you wanted

D

divrawat•7/9/24, 7:51 AM

Cloudflare Pages invoking functions on request to static assets in Next.js - I have deployed a fully static next.js website (pages directory of next.js) to cloudflare pages and I have added _routes.json file to root of my project excluding static assets from function invocation.

But still my Dashboard is showing the requests made , but it is a fully static site.

Is functions directory creating compalsory since all my website is static. Here is my github repo - https://github.com/divrawat/One-Blog

GitHub

GitHub - divrawat/One-Blog

Contribute to divrawat/One-Blog development by creating an account on GitHub.

V

villainy•7/9/24, 1:48 PM

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /favicon.ico

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /favicon.ico

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /favicon.ico

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /favicon.ico

right....

M

Muzzamil•7/9/24, 1:57 PM

how to fix this error

message.txt7.47KB

W

Walshy•7/9/24, 2:50 PM

env var -

YARN_VERSION

YARN_VERSION

YARN_VERSION

YARN_VERSION = 1

v2 defaults to yarn v3 which tries to change the lock file from v1 and then violates it's own rule against modifying the lock file

Vvillainy ```console ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project...

J

James•7/9/24, 4:07 PM

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

James•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

James•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

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

ugh

J

James•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

James•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

James•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

James•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

James•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

James•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

James•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

James•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

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+?

Hey <@94508156243161088> ! I havent double checked, but I'm assuming it generates Pages functions, n

Similar Threads

Similar Threads

Similar Threads