Is there something I have to configure in Netlify to have it skip the .netlify/functions/screenshots when making a request for a screenshot?

Calling the function with this in the path results in an error Invalid url: .netlify

Thanks.

I am pretty sure that this is the wrong place to open this issue and not a problem with your scripts, but somehow it might be helpful to see whatever solution this brings for others: I am using a specific CSS3-feature that seems to be broken in the screenshots.

Screenshot:

Original (with Chrome browser loaded):

Could you maybe point me in a direction what exactly is the issue here?

Problems:

• dark theme is default, light theme is used (cache? I just changed today to the dark theme as default, but adding random characters to the URL won't load a dark theme screenshot)
• background-clip is not working - code

Is the headless Chrome somehow in-capacitated in regards to specific features? I thought the used browser in puppeteer is the latest version...

I feel like this piece is doing nothing...

https://github.com/11ty/api-screenshot/blob/36407cf678a8c1633b0f816ca59a582bdd78c7b8/functions/screenshot.js#L43-L45

Building fails since a8b6b69 due to chrome-aws-lambda requiring puppeteer-core 10.1.*.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/puppeteer-core
npm ERR!   puppeteer-core@"^13.4.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer puppeteer-core@"^10.1.0" from [email protected]
npm ERR! node_modules/chrome-aws-lambda
npm ERR!   chrome-aws-lambda@"^10.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/alexandersandberg/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexandersandberg/.npm/_logs/2022-03-06T11_11_34_128Z-debug-0.log

Solution

Downgrade puppeteer-core.

After cloning this repo and deploying a new Netlify site, my site function wasn't generating images even when using exactly the same URL syntax as used on 11ty.dev.

Here's my original question on the 11ty Discord forum: https://discord.com/channels/741017160297611315/1039318195644928060

The problem appears to be chrome-aws-lambda not running correctly on Node 16. LewisDaleUK attempted to submit a PR ( https://github.com/11ty/api-screenshot/pull/14 ) using @sparticuz/chromium as a better-maintained replacement, but changing the dependency increases the package size over the 50 MB limit for functions.

Because Netlify is switching all new deploys to Node 16, this effectively means this project can't be used to launch new sites on Netlify.

I couldn't make this repo run by default on Netlify without downgrading Node.js versions.

14/16 didn't work, but 12 worked

I suggest specifying a version so that others trying to deploy it do not have to figure things out

Related:

• https://stackoverflow.com/questions/66214552/tmp-chromium-error-while-loading-shared-libraries-libnss3-so-cannot-open-sha/67117619#67117619
• https://answers.netlify.com/t/lambda-function-failing-in-netlify-build-20-3-1/48900
• https://answers.netlify.com/t/chrome-aws-lambda-stopped-working-possibly-due-to-different-version-of-netlify-build/48847

When linking to an 11ty screenshot image using either a direct link or an embed there is no image. Screenshot url: https://v1.screenshot.11ty.dev/https%3A%2F%2Fsplatoon.catgirlin.space%2Fopengraph%2F/opengraph/_wait:2_202249--1162/

Link: https://splatoon.catgirlin.space/battles/VnNIaXN0b3J5RGV0YWlsLXUtYXFha3g1N21va3NzZWlic3pubW06UkVDRU5UOjIwMjIxMjExVDAyMjAwMl9jNDJmZWFhZi03NDA2LTRkY2YtYWY3MC0wNTNjZGMzYmE1Yjg/ Screenshot url: https://v1.screenshot.11ty.dev/https%3A%2F%2Fsplatoon.catgirlin.space%2Fopengraph%2Fbattles%2FVnNIaXN0b3J5RGV0YWlsLXUtYXFha3g1N21va3NzZWlic3pubW06UkVDRU5UOjIwMjIxMjExVDAyMjAwMl9jNDJmZWFhZi03NDA2LTRkY2YtYWY3MC0wNTNjZGMzYmE1Yjg%2F/opengraph/_wait:2_202249/

In both cases, the image was already generated, so it shouldn't be a timeout issue. These links work fine on their own, and I haven't had an issue with open graph images anywhere else.

Spawned from #13. Related to #15.

Ideally we could upgrade the node runtime https://docs.aws.amazon.com/lambda/latest/dg/lambda-runtimes.html but newer versions of puppeteer blow past the 50MB AWS Lambda limit. I haven’t tested all versions of Puppeteer to see if there are some that work in Node 14 but don’t hit the 50MB limit yet.

Right now the workaround/requirement is to put an environment variable in your Netlify app UI setting AWS_LAMBDA_JS_RUNTIME to nodejs12.x. This cannot be set via netlify.toml (https://answers.netlify.com/t/netlify-functions-and-env-variables-from-netlify-toml/4404/28)

PR #14 uses the new package from Sparticuz: https://github.com/Sparticuz/chromium/issues/8

There is a hard deadline on this one (March 31, 2023) as Node 12 in AWS is going away: https://aws.amazon.com/blogs/developer/announcing-the-end-of-support-for-node-js-12-x-in-the-aws-sdk-for-javascript-v3/

Related:

• Build plugin may workaround the netlify.toml issue https://github.com/bencao/netlify-plugin-inline-functions-env#readme
• https://github.com/puppeteer/puppeteer/blob/da92055e9c187f4d0cce6ca548bc69689c452b6d/docs/troubleshooting.md
• https://answers.netlify.com/t/chrome-aws-lambda-stopped-working-possibly-due-to-different-version-of-netlify-build/48847
• https://answers.netlify.com/t/netlify-function-with-puppeteer-breaks-if-i-make-any-changes/76924

The font weight does not seem to be preserved.

I tried the manual cache invalidation and custom wait conditions too but get the same results. This might be related to issue #9

Example

| Original | 11ty Screenshot | | :---: | :---: | | | | | Original URL | 11ty API URL wait:2 | | | | | Original URL | 11ty API URL |

I'm using Bootstrap v5 and all custom CSS is minified inline. The NavBar and other styles from Bootstrap seem to load. I'm using the default font from bootstrap and am changing the font weight using custom CSS.

SourceCode

Update puppeteer-core and replace chrome-aws-lambda with @sparticuz/chromium

The current code will only work with Node 12, meaning it can't be deployed out of the box as Netlify uses Node 16.

The chrome-aws-lambda package hasn't been maintained in over a year, https://github.com/sparticuz/chromium is an alternative that provides the same functionality.

This is now able to be auto-deployed by Netlify and run out-of-the-box again

Sources:

• https://answers.netlify.com/t/netlify-cli-dropping-support-for-node-js-version-12/75130

via the original blog post:

Update (July 30, 2021): The other issue I noticed with using Puppeteer in a Lambda is that emoji are not available to the rendered content. So if a site is using Emoji they do not render. It looks like Matic Jurglič may have a workaround to solve this.

https://www.zachleat.com/web/screenshots/

I've installed this on my own domain screenshots.nicolas-hoizey.com hosted on Netlify.

It works well when run in the browser: https://screenshots.nicolas-hoizey.com/https%3A%2F%2Fcloudfour.com%2Fthinks%2Fsvg-icon-stress-test%2F/large/

But I get a CORS error when I try to use this image in a page on another domain:

I tried to add this to my netlify.toml file, but it doesn't fix the issue:

[[headers]]
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

Is there something specific to do because it's a Netlify Function?

There might be something here: https://stackoverflow.com/a/57974136/717195