chore: use node 16 for opengraph (#3025)

Co-authored-by: Simon Taggart <[email protected]>

Author: Niznikr

internal-docs/engineering/doc-site/open-graph-image-preview-function.md

@@ -62,7 +62,7 @@ The code that generates the opengraph preview page lives in:
 
 Netlify Functions are just AWS Lambdas in disguise. They take an incoming request and you can return a response.
 
-Inside our function we use `chrome-aws-lambda` for grabbing the Chrome Browser binary for AWS Lambdas, and puppeteer to run and control the browser.
+Inside our function we use `@sparticuz/chromium` for grabbing the Chrome Browser binary for AWS Lambdas, and puppeteer to run and control the browser.
 
 Using Puppeteer, we instruct Chrome to visit a url on the website, which renders a dynamic page based on the parameters we give it. We then tell puppeteer to use Chrome to take a screenshot of the page, and that image is then returned as the response of the function.
 
@@ -71,9 +71,3 @@ The page on the website renders a box 800px x 420px. The information is display
 [Winston](https://github.com/winstonjs/winston) does our logging, so we can observe the function running in real time in the Netlify UI.
 
 [Rollbar](https://docs.rollbar.com/docs/aws-lambda) wraps our function and helps log errors to the Rollbar service so we are alerted if it starts to break.
-
-## Node runtime
-
-🚨 **Node v14** 🚨
-
-The Netlify function must run using Node v14 for the Chrome binary to work correctly. We are explicitly opting out of Node 16 runtime in Netlify functions by setting the `AWS_LAMBDA_JS_RUNTIME` environment variable in the Netlify UI.

netlify.toml

@@ -14,7 +14,7 @@
 
 [functions]
   directory = "packages/paste-website/functions"
-  external_node_modules = ["chrome-aws-lambda", "puppeteer-core"]
+  external_node_modules = ["@sparticuz/chromium", "puppeteer-core"]
 
 # INTRODUCTION/
 [[redirects]]

package.json

@@ -126,6 +126,7 @@
     "@netlify/functions": "^0.7.2",
     "@percy/cli": "^1.10.1",
     "@percy/cypress": "^3.1.2",
+    "@sparticuz/chromium": "^110.0.0",
     "@storybook/addon-a11y": "7.0.0-beta.45",
     "@storybook/addon-actions": "7.0.0-beta.45",
     "@storybook/addon-essentials": "7.0.0-beta.45",
@@ -167,7 +168,6 @@
     "browser-sync": "^2.26.9",
     "chalk": "4.1.2",
     "chromatic": "^6.17.0",
-    "chrome-aws-lambda": "^10.0.0",
     "color": "^3.1.2",
     "commander": "^2.20.0",
     "concurrently": "^7.6.0",
@@ -209,7 +209,7 @@
     "precise-commits": "^1.0.2",
     "prettier": "^2.8.1",
     "prop-types": "^15.7.2",
-    "puppeteer-core": "^10.1.0",
+    "puppeteer-core": "^19.6.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-ga": "^3.3.0",

packages/paste-website/functions/opengraph.ts

@@ -13,7 +13,7 @@
  * or 900 seconds (Enterprise plan).
  */
 import puppeteer from 'puppeteer-core';
-import chromium from 'chrome-aws-lambda';
+import chromium from '@sparticuz/chromium';
 import Rollbar from 'rollbar';
 import type {LambdaHandler} from 'rollbar';
 
@@ -50,7 +50,7 @@ async function getOptions(isDev: boolean): Promise<{args: any; executablePath: a
   }
 
   return {
-    executablePath: await chromium.executablePath,
+    executablePath: await chromium.executablePath(),
     args: chromium.args,
     headless: chromium.headless,
   };

packages/paste-website/netlify.toml

@@ -22,7 +22,7 @@
 
 [functions]
   directory = "functions"
-  external_node_modules = ["chrome-aws-lambda", "puppeteer-core"]
+  external_node_modules = ["@sparticuz/chromium", "puppeteer-core"]
 
 # need to all add redirects to ./netlify.toml as well
 # INTRODUCTION/

packages/paste-website/package.json

@@ -26,6 +26,7 @@
     "@mdx-js/react": "^1.6.22",
     "@next/bundle-analyzer": "^13.1.6",
     "@next/mdx": "^13.1.6",
+    "@sparticuz/chromium": "^110.0.0",
     "@twilio-paste/alert": "^11.0.3",
     "@twilio-paste/alert-dialog": "^6.0.2",
     "@twilio-paste/anchor": "^9.0.2",
@@ -105,7 +106,6 @@
     "@types/lodash": "^4.14.182",
     "@types/mdx-js__react": "^1.5.5",
     "airtable": "^0.11.6",
-    "chrome-aws-lambda": "^10.0.0",
     "color": "^3.1.2",
     "date-fns": "2.21.3",
     "deepmerge": "4.2.2",
@@ -120,7 +120,7 @@
     "pretty-format": "^28.1.0",
     "prism-react-renderer": "^1.3.5",
     "prop-types": "^15.7.2",
-    "puppeteer-core": "^10.1.0",
+    "puppeteer-core": "^19.6.1",
     "react": "^18.0.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.0.0",