Investigate replacing puppeteer with smaller alternative

[vercel]

Investigate replacing puppeteer with smaller alternative

[styfle]

We decided that embedding a browser is not a sustainable solution.

So we built an alternative solution to convert HTML/CSS to PNG.

Check out https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images

[marklawlor]

@styfle Both the linked issue and discussion continue after being marked as resolved and contain the example repo that fails (updated after the patch was released)

For example vercel/vercel#4013 (comment) and its follow up comment vercel/vercel#4013 (comment)

This is the exact issue I am receiving.

[marklawlor]

@styfle Indeed that comment is out of place for this repo, but it would be greatly appreciated if you could take your time to answer some of the questions in the linked issue.

It appears that Vercel imposes a combined 50mb issue on all NextJS /pages/api functions, but allows a 50mb individual limit for functions in /api. This seems counter intuitive to the Vercel limits documentation as @next/bundle-analyzer reports /pages/api as individual functions.

For example if you have three functions that compile to 45mb, 5mb, 2mb. If using NextJS you will not be able to deploy onto Vercel, however this will work for non-NextJS projects.

Also just to clarify this is not a puppeteer issue, you could have a lambda function that reads 45mb JSON file and get the same issue.

I hope that explains @JavierMartinz's intent and again it would be awesome if you could take the time to post a clarifying response in the linked issue. There is also this discussion thread

[yisibl]

I've put together a table, plus there's a Wiki test suite with more detailed edge cases for further comparison: https://commons.wikimedia.org/wiki/User:JoKalliauer/SVG_test_suites/resvg_Issues_details

Engine & binding	resvg & resvg-js	sharp & librsvg	skia & skr-canvas
language	Rust	Rust/C++	Rust/C++
Features	Lightweight and fast. SVG1.1 best compatibility	Full CSS3 selector support, <text> support is poor	Less support for SVG and CSS selectors

resvg(resvg-js) and librsvg(sharp) each have their own strengths, with librsvg being a bit faster with new features and bug fixes after migrating to Rust, but no crate has been released yet. resvg-js can easily achieve dual-engine rendering in the future, thanks to napi-rs's good architecture, to complement each other.

[leerob]

@jongold we're testing a few approaches right now! Check out the latest pulls https://github.com/vercel/og-image/pulls

[JavierMartinz]

I'm having this problem too and I cannot deploy it to Vercel. I saw here that a workaround would be moving the JS from pages/api/ to api/, but in that case the URL wouldn't be reachable anymore.

[styfle]

in that case the URL wouldn't be reachable anymore

What does that mean?

Using api/ is how this repo works as seen here: https://og-image.vercel.app

Have you tried cloning this repo and using the same dependency version from package.json?

[styfle]

@marklawlor The linked issues were fixed so perhaps you are hitting a different corner case.

If you could create a new issue with an example repo that fails, then we can take a look, thanks!

[jemgold]

+1 - I love the approach of this repo but running into these issues getting it running in Next.js on Vercel

[AmreshSinha]

You can also give node-canvas a try

[weolar]

hi, you can use miniblink: https://github.com/weolar/miniblink49