Gatsby Functions | Puppeteer

[PaulieScanlon]

Hi team, i've been playing with Functions and wanted to make one of those screenshot serverless functions that will use Puppeteer to open a url, screenshot it and save the image to static. I've tried to use puppeteer and chrome-aws-lambda

I've tried this another way too with running puppeteer in gatsby-node but my site is hosted on Gatsby Cloud but that's a no go too: #20970

Here's a repro repo

https://github.com/PaulieScanlon/gatsby-functions-puppeteer

branches

• main is just straight up puppeteer
• feat/chrome-aws-lambda uses chrome-aws-lambda and puppeteer-core, there's a PR here to help you see the diff

Description

In both cases i'm seeing weird errors but i'm not sure what they relate to.

Steps to reproduce

run gatsby develop - visit index - look at errors in terminal

Expected result

There should be a screenshot of http://example.com/ in the /static/images dir

Actual result

Errors

• main => "Error: Cannot find module 'puppeteer'"
• feat/chrome-aws-lambda => " SyntaxError: Invalid left-hand side in assignment"

Environment

System:
OS: macOS Mojave 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.1 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 7.15.1 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.77
Firefox: 89.0
Safari: 13.1.1
npmPackages:
gatsby: ^3.7.0 => 3.7.0
npmGlobalPackages:
gatsby-cli: 2.15.1

[wardpeet]

Hi there! At this moment, we don't support any custom binaries or WASM packages. This will be available later in the year. We need to ensure functions are secure and sandboxed, which is more difficult to do with WASM or binaries.

If you want to do screenshotting with puppeteer, you should still use AWS-lambda, GCS functions, Azure Functions, ...

We should definitely improve error messages here :D

[PaulieScanlon]

Ahoy @wardpeet 🏴‍☠️ no worries at all. Completely understandable -- just wanted to check i wasn't being a rascal and doing something wrong!

[LekoArts]

You can watch #31849 for updates on this :)

[PaulieScanlon]

Hey @LekoArts Ty for this! I'll watch for updates! Splendid work team! 🕺