`compatibility_flags = ["nodejs_compat"]` and `node_compat = true` not having the same compatability

J

jjjrmyOP•6/18/24, 11:31 PM

@HardlyWorkin' something that works on Workers is not working on Pages Functions

Jjjjrmy `compatibility_flags = ["nodejs_compat"]` and `node_compat = true` not having th...

H

Hello, I’m Allie!•6/19/24, 6:05 AM

Yeah, so what explicitly is the issue? I can only help if I know exactly what is going wrong

J

jjjrmyOP•6/19/24, 1:40 PM

@HardlyWorkin' a package that works on Workers doesn't work on Pages Functions. It throws errors when trying to build about the imports

J

jjjrmyOP•6/19/24, 1:42 PM

@HardlyWorkin' this works fine on workers: https://github.com/sutandojs/sutando-examples/tree/main/typescript/rest-hono-cf-d1

But if you were to use the package within a Nuxt project - it won't build.

GitHub

sutando-examples/typescript/rest-hono-cf-d1 at main · sutandojs/sut...

Examples using Sutando. Contribute to sutandojs/sutando-examples development by creating an account on GitHub.

N

Nicolasmp•6/19/24, 1:43 PM

Hi there, I am using a NextJS based pages project using the GIT integration. I have a very simple worker (in functions folder, a hello world).For some reason on latest builds I do not see this worker being deployed anymore.

J

jjjrmyOP•6/19/24, 6:08 PM

@HardlyWorkin' are you able to look at deploy logs?

Jjjjrmy @HardlyWorkin' are you able to look at deploy logs?

H

Hard@Work•6/19/24, 6:44 PM

Sorry, was a bit busy, let me catch up with this thread...

Jjjjrmy @HardlyWorkin' this works fine on workers: https://github.com/sutandojs/sutando-...

H

Hard@Work•6/19/24, 6:51 PM

Ok, I see what might be the issue. It appears the project uses the

node_compat

node_compat

node_compat

node_compat polyfill system, which isn't supported on Functions

HHard@Work Ok, I see what might be the issue. It appears the project uses the `node_compat`...

J

jjjrmyOP•6/19/24, 6:51 PM

it's not building with the wrangler file for Pages/Functions

Jjjjrmy it's not building with the wrangler file for Pages/Functions

H

Hard@Work•6/19/24, 6:52 PM

I'm not sure I understand what you are saying?

J

jjjrmyOP•6/19/24, 6:52 PM

I pinged you in the thread

T

TheKaiser•6/20/24, 11:26 PM

anyone have advice on debugging a 500 for my ssr app? finally got my first build to go through but I just get a 500 page, and since its ssr, all i get from going to the page is the 500 error page without any way to see what the actual error is. Also don't see anything on the functions metrics page

T

TheKaiser•6/20/24, 11:41 PM

nvm found the Real-time Logs section in the functions tab of my deployment

P

Phonebox•6/21/24, 3:04 AM

I’m seeing a p99 of 95ms and a p50 of 4.6ms on CPU time for functions after deploying the next js starter app to pages. What’s going on here? Why are these values so high?

Original message was deleted

H

Hard@Work•6/21/24, 11:31 AM

لطفاً طبق قوانین #

welcome-and-rules سؤال خود را در چندین کانال پست نکنید. برای افرادی که سعی در کمک به شما دارند سردرگمی ایجاد می کند و مشکل یا سوال شما را سریعتر حل نمی کند.

PPerry Sahnow When using a KV binding in a function in dev mode does it actually update the KV...

H

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

It updates a local version of your KV namespace in

.wrangler

.wrangler

.wrangler

.wrangler

B

bnason•6/24/24, 1:21 PM

I'm deploying a Nuxt app however it seems like an import from one of my dependencies is undefined. I'm importing

samlify

samlify

samlify

samlify and it is importing some exports from

node-forge

node-forge

node-forge

node-forge but those are undefined. I get

TypeError: Cannot read properties of undefined (reading 'decode64') at ....

TypeError: Cannot read properties of undefined (reading 'decode64') at ....

TypeError: Cannot read properties of undefined (reading 'decode64') at ....

TypeError: Cannot read properties of undefined (reading 'decode64') at .... It works fine locally but I'm not sure how to debug what is going on when it's deployed to CloudFlare. Does anyone have any ideas?

B

bnason•6/24/24, 1:23 PM

Plus I'm not sure if this is a Functions question or a Workers question. I think it deploys functions but I'm new to this.

D

DaniFoldi•6/24/24, 1:27 PM

?channel-crossposting import is undefined

F

Flare•6/24/24, 1:27 PM

Please do not post your question in multiple channels per the rules at #

welcome-and-rules. It creates confusion for people trying to help you and doesn't get your issue or question solved any faster.

S

SonyC•6/24/24, 6:05 PM

Hello, I have set a Service bindings in my worker pages setting to be able to request from the statically web page(built with vite) I deployed in pages to a worker. My issue is that I don't know how to access the env variable from my static page code to get the env.SERVICE.fetch call(I tried using import.meta.env but that doesn't work). HELP.

SSonyC Hello, I have set a Service bindings in my worker pages setting to be able to re...

H

Hard@Work•6/25/24, 10:07 AM

You can't access bindings during build, if that is what you mean

HHard@Work You can't access bindings during build, if that is what you mean

S

SonyC•6/25/24, 11:04 AM

But how I'm supposed to access them from a static web page(I don't want to access them in development/local, I eman production once it is deployed), will the env variable be accessible? In a worker the context comes from the event onRequest but how from a worker page?

SSonyC But how I'm supposed to access them from a static web page(I don't want to acces...

H

Hard@Work•6/25/24, 12:45 PM

From a completely static page? You can't

H

Hard@Work•6/25/24, 12:45 PM

Bindings are available at runtime

S

SonyC•6/25/24, 12:57 PM

So I have a react static page, built with vite(rollup), I need to create a functions folder and listen to fetch events like this:

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith('/api/')) {
      const apiRequest = new Request(
        `https://your-worker-url.com${url.pathname}`,
        request
      );
      return env.MY_WORKER_SERVICE.fetch(apiRequest);
    }

    return env.ASSETS.fetch(request);
  },
};

});

In this example, MY_WORKER_SERVICE is the name I gave to the service binding in the Cloudflare Pages dashboard.
using the SERVICE and in the static code just request to localhost/api.....?

SSonyC So I have a react static page, built with vite(rollup), I need to create a funct...

H

Hard@Work•6/25/24, 1:21 PM

You probably want this instead:

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

// functions/api/[[route]].ts
export const onRequest: PagesFunction = ({ request }) => {
  const url = new URL(request.url);
  url.host = "your-worker-url.com";
  return fetch(url.toString(), request);
};

S

SonyC•6/25/24, 1:40 PM

so, a [route].ts file for each endpoint?

SSonyC so, a [route].ts file for each endpoint?

H

Hard@Work•6/25/24, 1:41 PM

No, the above should catch anything on

/api

/api

/api

/api

H

Hard@Work•6/25/24, 1:41 PM

https://developers.cloudflare.com/pages/functions/routing/#dynamic-route-examples

Cloudflare Docs

Routing · Cloudflare Pages docs

Functions utilize file-based routing. Your /functions directory structure determines the designated routes that your Functions will run on. You can …

S

SonyC•6/25/24, 1:41 PM

Thanks!

KKynson For anyone who encounters the same problem, it seems that page function does not...

D

Deo Kumar•6/29/24, 12:45 PM

try
https://www.npmjs.com/package/@cf-wasm/satori
https://www.npmjs.com/package/@cf-wasm/og

npm

@cf-wasm/satori

Enlightened library to convert HTML and CSS to SVG.. Latest version: 0.1.19, last published: a month ago. Start using @cf-wasm/satori in your project by running

npm i @cf-wasm/satori

npm i @cf-wasm/satori

npm i @cf-wasm/satori

npm i @cf-wasm/satori. There is 1 other project in the npm registry using @cf-wasm/satori.

npm

@cf-wasm/og

Generate Open Graph Images dynamically from HTML/CSS without a browser.. Latest version: 0.1.27, last published: a day ago. Start using @cf-wasm/og in your project by running

npm i @cf-wasm/og

npm i @cf-wasm/og

npm i @cf-wasm/og

npm i @cf-wasm/og. There are no other projects in the npm registry using @cf-wasm/og.

D

Deo Kumar•6/29/24, 12:46 PM

its just a wrapper, you dont need to manually initialize the yoga

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

import { satori } from "@cf-wasm/satori"; // <- for cf workers/pages
import { satori } from "@cf-wasm/satori/next"; // <- for next js edge

S

surgery18•6/30/24, 4:13 AM

Is there any way to make the page functions use all remote resources instead of local? Like for D1, R2, DO, KV, Queues, etc? Thanks.

Ssurgery18 Is there any way to make the page functions use all remote resources instead of ...

H

Hello, I’m Allie!•6/30/24, 4:43 AM

Not for Pages

HHello, I’m Allie!Not for Pages

S

surgery18•6/30/24, 4:46 AM

Any plans on adding the ability to use remote resources?

Ssurgery18 Any plans on adding the ability to use remote resources?

H

Hello, I’m Allie!•6/30/24, 4:48 AM

Maybe when Workers and Pages get merged into a single product?

V

valkyrie_pilot•6/30/24, 4:51 AM

is that in the roadmap?

W

Walshy•6/30/24, 9:28 AM

Converging the products? Yes, it's in active development

S

scruffy•7/1/24, 4:18 PM

Just ran into an issue where adding

wrangler.toml

wrangler.toml

wrangler.toml

wrangler.toml and running a

wrangler pages dev

wrangler pages dev

wrangler pages dev

wrangler pages dev command results in a hanging browser. Raised it on GitHub (https://github.com/cloudflare/workers-sdk/issues/6173), then noticed the message on https://developers.cloudflare.com/pages/functions/wrangler-configuration/ that said to come here... does anyone know if this is expected behaviour or am I doing something wrong?

GitHub

Issues · cloudflare/workers-sdk

Home to Wrangler, the CLI for Cloudflare Workers® - Issues · cloudflare/workers-sdk