@vercel/og works with next-on-pages

Zzegevlier It would require you to stick with old, unsupported, versions of wrangler if you...

Dario•3/30/24, 11:18 PM

I see... the way I see it is sort of like: we don't have a perfect solution, so, instead of adding to the runtime something half-baked/problematic right now (thus committing to it forever) let's find an intermediate solution that can help people out to some degree, best-effort like. That being the build time node_compat flag.

That does make sense to me.

Also people with much more knowledge in that area than me made the decision above (which I don't know how set in stone is to be honest), people who know the downsides and maintenance burden of adding such polyfills into the runtime, so I trust their judgment

, but if you want I am totally happy to pass your feedback along or see if I can connect you directly with them

NNob @vercel/og works with next-on-pages

Dario•3/30/24, 11:20 PM

yeah it should!

(
although there's a small bug that makes it potentially fail sometimes

as you can see near the bottom here: https://github.com/cloudflare/next-on-pages/issues/39
)

GitHub

[🐛 Bug]: `@vercel/og` doesn't work · Issue #39 · cloudflare/next-on...

I'm having issues getting my project to successfully deploy on Cloudflare because I am relying on a dependency (@vercel/og) which uses satori/wasm. The Vercel building process goes fine but whe...

DDeo Kumar Does blob: fetch not work on next on pages? Like: ``` fetch(new URL("../noto-sa...

Dario•3/30/24, 11:21 PM

it should work...

(could you maybe share a repro?

)

Kimitri•3/31/24, 4:37 AM

I installed @cloudflare/next-on-pages on my aplication and it alert a lot of vulnerability

npm audit report

debug 4.0.0 - 4.3.0
Regular Expression Denial of Service in debug - https://github.com/advisories/GHSA-gxpj-cx7g-858c
fix available via

npm audit fix

npm audit fix

node_modules/@vercel/fun/node_modules/debug
@vercel/fun <=1.1.0
Depends on vulnerable versions of debug
Depends on vulnerable versions of semver
node_modules/@vercel/fun
vercel 28.12.3 >=32.0.2
Depends on vulnerable versions of @vercel/fun
Depends on vulnerable versions of @vercel/node
node_modules/vercel

semver 7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via

npm audit fix

npm audit fix

node_modules/@vercel/fun/node_modules/semver

undici <=5.28.2
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
fix available via

npm audit fix

npm audit fix

node_modules/@vercel/node/node_modules/undici
@vercel/node 2.14.0 || >=3.0.2
Depends on vulnerable versions of undici
node_modules/@vercel/node

6 vulnerabilities (3 low, 3 moderate)

GitHub

CVE-2017-16137 - GitHub Advisory Database

Regular Expression Denial of Service in debug

GitHub

CVE-2022-25883 - GitHub Advisory Database

semver vulnerable to Regular Expression Denial of Service

GitHub

CVE-2024-24758 - GitHub Advisory Database

Undici proxy-authorization header not cleared on cross-origin redirect in fetch

DDario it should work... 😓 (could you maybe share a repro? 😅)

Deo Kumar•3/31/24, 8:01 AM

Thanks but today when I built the app without making any changes, it started working. I don't know how and why

Deo Kumar•3/31/24, 8:05 AM

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

https://www.npmjs.com/package/@cf-wasm/resvg

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

I published npm package by forking vercel/og and it supports svg output

npm

@cf-wasm/og

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

npm i @cf-wasm/og

npm i @cf-wasm/og

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

npm

@cf-wasm/resvg

A high-performance SVG renderer and toolkit, powered by Rust based resvg.. Latest version: 0.1.12, last published: 2 hours ago. Start using @cf-wasm/resvg in your project by running

npm i @cf-wasm/resvg

npm i @cf-wasm/resvg

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

npm

@cf-wasm/satori

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

npm i @cf-wasm/satori

npm i @cf-wasm/satori

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

DDeo Kumar Thanks but today when I built the app without making any changes, it started wor...

Dario•3/31/24, 8:44 AM

it may be related to the runtime issue I mentioned

let's keep an eye on it

DDario yeah it should! 🙂 ( although there's a small bug that makes it potentially fai...

NobOP•3/31/24, 10:38 AM

yes i know but only if you have paid plan

NobOP•3/31/24, 10:39 AM

because with free plan vercel/og is too big

bun•3/31/24, 2:18 PM

is it only me or does anyone have this issue where when you fix a syntax error the compiler error persists before you restart the whole dev server?

bun•3/31/24, 2:20 PM

tbh its not only for syntax error but for any error wow

bun•3/31/24, 2:21 PM

the error gets dismissed when you do some kind of change, but for any hard reloads the error comes back until you restart the dev server

thanhle•3/31/24, 4:54 PM

do you have any suggest for the package of fetching data in Workers. I use fetch but it is inconvenient. Axios is not compatible with edge run time.

Tthanhle do you have any suggest for the package of fetching data in Workers. I use fetc...

Hello, I’m Allie!•3/31/24, 4:57 PM

Fetch is the way to fetch data on Workers. You could probably write something similar over a TCP socket, but that would be a lot more work, and a lot less ergonomic

James•3/31/24, 5:37 PM

why do you need a package to fetch data?

JJames why do you need a package to fetch data?

thanhle•3/31/24, 5:38 PM

I got it. fetch is fine for me. Ijust consider other package. Cause in nodejs I mainly use axios, so I thought edge runtime also support axios

thanhle•3/31/24, 6:59 PM

I try to use R2binding in next-on-pages. As fas as I understand, It only work locally when I run npm run dev. I mean it creates the r2 folder in the .wrangler. Is there anyway I can interact with the remore resource R2 in cloudflare when running "npm run dev" in nextjs app using next-on-pages.

Tthanhle do you have any suggest for the package of fetching data in Workers. I use fetc...

bun•3/31/24, 8:28 PM

you can check out my library https://github.com/sunneydev/requestly

thanhle•4/1/24, 2:56 AM

Upon inspecting the _worker.js folder in the .vercel/output directory after running "npx @cloudflare/next-on-pages" in my Next.js app, I noticed a JSON file named "nop-build-log.json." It's hefty, around 262 kB, free tier limit for Workers is 1 MB after gzip compression. My question is: Is the "nop-build-log.json" file essential for running the application? Also, does Cloudflare Pages upload this file during deployment via the dashboard with Git integration?

P.S.: Cloudflare is fantastic! I truly enjoy using their services, especially the supportive community. I plan to upgrade my account to a paid tier eventually, as my application will likely exceed the 1 MB limit in the future. My point here is to try to reduce the bundle size of the code and understand how the system works.
Thank you all.

Tthanhle Upon inspecting the _worker.js folder in the .vercel/output directory after runn...

Hello, I’m Allie!•4/1/24, 6:58 AM

It's only counted if it is imported by the

_workers.js

_workers.js

file, which I'm going to guess it isn't. Then it is instead subject to the 25 MiB per-file limit

Tthanhle Upon inspecting the _worker.js folder in the .vercel/output directory after runn...

James•4/1/24, 11:14 AM

that file isn't included in the uploaded deployment

JJames that file isn't included in the uploaded deployment

thanhle•4/1/24, 1:47 PM

thank James

HHello, I’m Allie!It's only counted if it is imported by the `_workers.js` file, which I'm going t...

thanhle•4/1/24, 1:48 PM

thank you.

rob•4/1/24, 5:02 PM

anyone use https://hub.nuxt.com/ before?

James•4/1/24, 6:01 PM

nope, looks like it's supposed to be for nuxt instead of next

Taylor•4/1/24, 8:04 PM

how easy is it to hit that 10MB worker size on the paid plan?

TTaylor how easy is it to hit that 10MB worker size on the paid plan?

Isaac McFadyen•4/1/24, 8:33 PM

Workers are now limited to 25MB, not 10.

Taylor•4/1/24, 8:33 PM

oh so 1mb free 25mb on paid?

TTaylor oh so 1mb free 25mb on paid?

Isaac McFadyen•4/1/24, 8:35 PM

Yup.

Taylor•4/1/24, 8:36 PM

take my $5

IIsaac McFadyen Workers are now limited to 25MB, not 10.

thanhle•4/1/24, 8:39 PM

why I see on the website it said that the limit is 10MB. Can you share the link for 25 MB limit?

Tthanhle why I see on the website it said that the limit is 10MB. Can you share the link ...

Isaac McFadyen•4/1/24, 8:41 PM

There was an open docs pull request but it was closed for some reason: https://github.com/cloudflare/cloudflare-docs/pull/13253/files

Isaac McFadyen•4/1/24, 8:41 PM

~~I can confirm it's definitely 25MB though, I have a Worker that's near that.~~ Correction: it's 10.

thanhle•4/1/24, 8:43 PM

On the github it said that 5MB for free and 25MB for 5$, can anyone in Cloudflare team confirm this? On the docs it still showed 1MB and 10MB.

Taylor•4/1/24, 9:28 PM

Prediction: They're going to announce the increased plans as part of this week's dev week announcements.

James•4/1/24, 9:44 PM

The 25mb limit has been a thing for quite a long time, not a new plan increase

JJames The 25mb limit has been a thing for quite a long time, not a new plan increase

thanhle•4/1/24, 9:45 PM

and the free plan limit is 5MB instead of 1MB as docs mentioned?

James•4/1/24, 9:48 PM

not sure about the free plan, but paid has been 25 for quite a while

emg184•4/2/24, 1:13 AM

Any recommended libraries for password hashing in edge runtime. bcryptjs and bcrypt are both not compatible

Taylor•4/2/24, 5:37 AM

@emg184 Scrypt from lucia

Taylor•4/2/24, 5:37 AM

what i do:

  const hashedPassword = await new Scrypt().hash(password);

  const hashedPassword = await new Scrypt().hash(password);

TTaylor <@861381963175821332> Scrypt from lucia

emg184•4/2/24, 12:42 PM

Perfect thanks haven’t used Lucia but looks good to me

Pat Branchaud•4/2/24, 9:58 PM

Hey, in order to fecth Firebase Firestore rest API, I want to authenticate with google and obtain a JSON Web Token during build or before build and then fetch my database. It works locally, but can't find a way to make it work on cloudflare, any suggestion on how to do this?

JJames not sure about the free plan, but paid has been 25 for quite a while

avsaase•4/2/24, 10:43 PM

I've had a failing deployment because my worker was more than 10MB in the past two weeks or so.

Taylor•4/3/24, 12:29 AM

@Pat Branchaud not an expert but i'm pretty sure JWT is based on node which is incompatible

TTaylor <@836762764672106586> not an expert but i'm pretty sure JWT is based on node whi...

Pat Branchaud•4/3/24, 2:05 AM

thank you, found this https://github.com/tsndr/cloudflare-worker-jwt testing it

GitHub

GitHub - tsndr/cloudflare-worker-jwt: A lightweight JWT implementat...

A lightweight JWT implementation with ZERO dependencies for Cloudflare Workers. - tsndr/cloudflare-worker-jwt

thanhle•4/3/24, 3:41 AM

I have a next-on-pages API need to call other Worker. Is it similar when useing binding and fetch method for calling other Worker from next-on-pages application.

neoney•4/3/24, 7:01 PM

id assume just fetch()

Tthanhle I have a next-on-pages API need to call other Worker. Is it similar when useing ...

Dario•4/3/24, 9:25 PM

you need to set up a service binding to your Pages application to a worker, then you can access the binding with

getRequestContext

getRequestContext

and use its

fetch

fetch

method

DDario you need to set up a service binding to your Pages application to a worker, then...

thanhle•4/3/24, 9:27 PM

Can I just setup a new worker. Deploy to Cloudflare. That worker has a url. On my page I just use fetch with that url like a normal url.

@vercel/og works with next-on-pages

npm audit report

Similar Threads

Similar Threads

npm audit report

Similar Threads