Skip to content

Instantly share code, notes, and snippets.

@kettanaito

kettanaito/README.md

Last active April 10, 2025 04:04
Download ZIP

Revisions

  1. kettanaito revised this gist Dec 26, 2022. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -121,3 +121,7 @@ Error while loading shared libraries: libnss3.so: cannot open shared object file
    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by [Using the right Node.js version](#choose-nodejs-14x).

    > People on the web will suggest all sorts of things to tackle this, like installing `libnss3.so` manually, but fret not: it's solved by using the right version of Node.js.
    ---

    If you found this helpful, consider [Buying me a cup of coffee](https://www.buymeacoffee.com/kettanaito).
  2. kettanaito revised this gist Nov 3, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,9 @@ Turns out, choosing the right versions of dependencies is crucial. Newer version

    ```jsonc
    {
    "chrome-aws-lambda": "10.0.1",
    "chrome-aws-lambda": "10.1.0",
    // Install v10 to have a smaller Chromium distributive.
    "puppeteer-core": "10.0.1"
    "puppeteer-core": "10.1.0"
    }
    ```

  3. kettanaito revised this gist Oct 22, 2022. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,8 @@ Playwright comes with a larger Chromimum instance that would exceed the maximum

    ### Step 2: Write a function

    The way you write your function does not matter: it may be a Node.js function, a part of your Next.js `/api` routes, or a Remix application. What matters on this stage is to **launch Puppeteer with correct options**.

    ```js
    // api/run.js
    import edgeChromium from 'chrome-aws-lambda'
    @@ -40,7 +42,7 @@ import puppeteer from 'puppeteer-core'
    // system-agnostic options for Puppeteeer.
    const LOCAL_CHROME_EXECUTABLE = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'

    export default async function () {
    export default async function (req, res) {
    // Edge executable will return an empty string locally.
    const executablePath = await edgeChromium.executablePath || LOCAL_CHROME_EXECUTABLE

    @@ -52,6 +54,8 @@ export default async function () {

    const page = await browser.newPage()
    await page.goto('https://github.com')

    res.send('hello')
    }
    ```

  4. kettanaito revised this gist Oct 22, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ This is an up-to-date guide on running Chromium in Vercel serverless functions i

    ### Step 1: Install dependencies

    Use [chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda) that comes with a Chromium pre-configured to run in serverless, and `puppeteer-core` due to the smaller size of Chromium distributive.
    Use [chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda) that comes with Chromium pre-configured to run in serverless, and `puppeteer-core` due to the smaller size of Chromium distributive.

    Turns out, choosing the right versions of dependencies is crucial. Newer versions of `puppeteer-core` ship larger Chromium distributive, which will exceed the 50MB function size limit on Vercel.

  5. kettanaito revised this gist Oct 22, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ This is an up-to-date guide on running Chromium in Vercel serverless functions i

    ### Step 1: Install dependencies

    Use [chrome-aws-lambda]() that comes with a Chromium pre-configured to run in serverless, and `puppeteer-core` due to the smaller size of Chromium distributive.
    Use [chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda) that comes with a Chromium pre-configured to run in serverless, and `puppeteer-core` due to the smaller size of Chromium distributive.

    Turns out, choosing the right versions of dependencies is crucial. Newer versions of `puppeteer-core` ship larger Chromium distributive, which will exceed the 50MB function size limit on Vercel.

  6. kettanaito revised this gist Oct 22, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -106,14 +106,14 @@ If you do, this means your Node.js version is not configured correctly and you s
    Error: The Serverless Function "XYZ" is XX.YYmb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
    ```

    This means you're deploying a Chromium executable that's too large. To solve this, make sure to use correct dependency versions that ship with smaller executable. See the instructions on that above.
    This means you're deploying a Chromium executable that's too large. Solve this by [Installing the right dependency versions](#step-1-install-dependencies).

    ### libnss3.so

    ```
    Error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory
    ```

    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by following the "Choose Node.js 14.x" section above.
    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by [Using the right Node.js version](#choose-nodejs-14x).

    > People on the web will suggest all sorts of things to tackle this, like installing `libnss3.so` manually, but fret not: it's solved by using the right version of Node.js.
  7. kettanaito revised this gist Oct 22, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -36,6 +36,8 @@ import puppeteer from 'puppeteer-core'

    // You may want to change this if you're developing
    // on a platform different from macOS.
    // See https://github.com/vercel/og-image for a more resilient
    // system-agnostic options for Puppeteeer.
    const LOCAL_CHROME_EXECUTABLE = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'

    export default async function () {
  8. kettanaito revised this gist Oct 22, 2022. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ This is an up-to-date guide on running Chromium in Vercel serverless functions i

    ## Getting started

    ### Install correct dependencies
    ### Step 1: Install dependencies

    Use [chrome-aws-lambda]() that comes with a Chromium pre-configured to run in serverless, and `puppeteer-core` due to the smaller size of Chromium distributive.

    @@ -24,7 +24,7 @@ Turns out, choosing the right versions of dependencies is crucial. Newer version

    Playwright comes with a larger Chromimum instance that would exceed the maximum allowed serverless function size limit of 50MB on Vercel (transitively, AWS).

    ### Write a function
    ### Step 2: Write a function

    ```js
    // api/run.js
    @@ -53,7 +53,7 @@ export default async function () {
    }
    ```

    ### Configure your Vercel deployment
    ### Step 3: Configure Vercel deployment

    #### Choose Node.js 14.x

  9. kettanaito revised this gist Oct 22, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -113,3 +113,5 @@ Error while loading shared libraries: libnss3.so: cannot open shared object file
    ```

    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by following the "Choose Node.js 14.x" section above.

    > People on the web will suggest all sorts of things to tackle this, like installing `libnss3.so` manually, but fret not: it's solved by using the right version of Node.js.
  10. kettanaito revised this gist Oct 22, 2022. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -106,6 +106,10 @@ Error: The Serverless Function "XYZ" is XX.YYmb which exceeds the maximum size l

    This means you're deploying a Chromium executable that's too large. To solve this, make sure to use correct dependency versions that ship with smaller executable. See the instructions on that above.

    ### Error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory
    ### libnss3.so

    ```
    Error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory
    ```

    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by following the "Choose Node.js 14.x" section above.
  11. kettanaito revised this gist Oct 22, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -101,7 +101,7 @@ If you do, this means your Node.js version is not configured correctly and you s
    ### Serverless function exceeds the maximum size limit of 50mb

    ```
    Error: The Serverless Function "render" is 50.44mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
    Error: The Serverless Function "XYZ" is XX.YYmb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
    ```

    This means you're deploying a Chromium executable that's too large. To solve this, make sure to use correct dependency versions that ship with smaller executable. See the instructions on that above.
  12. kettanaito revised this gist Oct 22, 2022. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -89,8 +89,23 @@ If you do, this means your Node.js version is not configured correctly and you s

    ---

    ## References

    - https://github.com/vercel/og-image, an old example of how Vercel used Chromium on the server to generate OG images.
    - https://github.com/vercel/community/discussions/124, a large discussion on Puppeteer/Playwright in serverless functions.

    ---

    ## Troubleshooting

    ### Serverless function exceeds the maximum size limit of 50mb

    ```
    Error: The Serverless Function "render" is 50.44mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
    ```

    This means you're deploying a Chromium executable that's too large. To solve this, make sure to use correct dependency versions that ship with smaller executable. See the instructions on that above.

    ### Error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by following the "Choose Node.js 14.x" section above.
  13. kettanaito revised this gist Oct 22, 2022. 1 changed file with 16 additions and 4 deletions.
    20 changes: 16 additions & 4 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,14 @@
    # Chromium on Vercel (serverless)

    This is an up-to-date guide on running Chromium in Vercel serverless functions in 2022.
    This is an up-to-date guide on running Chromium in Vercel serverless functions in 2022. What you will read below is the result of two days of research, debugging, 100+ failed deployments, and a little bit of stress.

    ## Getting started

    ### Dependencies
    ### Install correct dependencies

    First, it comes down to choosing the **right versions** of dependencies.
    Use [chrome-aws-lambda]() that comes with a Chromium pre-configured to run in serverless, and `puppeteer-core` due to the smaller size of Chromium distributive.

    Turns out, choosing the right versions of dependencies is crucial. Newer versions of `puppeteer-core` ship larger Chromium distributive, which will exceed the 50MB function size limit on Vercel.

    ```jsonc
    {
    @@ -77,8 +79,18 @@ In addition to configuring this on Vercel, make sure that your project's `packag
    }
    ```

    Basically, you **should not** see this warning in your deployment logs:

    ```
    Warning: Detected "engines": { "node": ">=14" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
    ```

    If you do, this means your Node.js version is not configured correctly and you should repeat this section.

    ---

    ## Troubleshooting

    - ...
    ### Error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

    This error means you're running an older/newer version of Node.js rather than Node.js 14. Solve this by following the "Choose Node.js 14.x" section above.
  14. kettanaito created this gist Oct 22, 2022.
    84 changes: 84 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    # Chromium on Vercel (serverless)

    This is an up-to-date guide on running Chromium in Vercel serverless functions in 2022.

    ## Getting started

    ### Dependencies

    First, it comes down to choosing the **right versions** of dependencies.

    ```jsonc
    {
    "chrome-aws-lambda": "10.0.1",
    // Install v10 to have a smaller Chromium distributive.
    "puppeteer-core": "10.0.1"
    }
    ```

    > If you feel adventerous and wish to update dependencies, start from updating `chrome-aws-lambda`. Its peer dependency on `puppeteer-core` will tell you the maximum supported version to use.
    #### Why not Playwright?

    Playwright comes with a larger Chromimum instance that would exceed the maximum allowed serverless function size limit of 50MB on Vercel (transitively, AWS).

    ### Write a function

    ```js
    // api/run.js
    import edgeChromium from 'chrome-aws-lambda'

    // Importing Puppeteer core as default otherwise
    // it won't function correctly with "launch()"
    import puppeteer from 'puppeteer-core'

    // You may want to change this if you're developing
    // on a platform different from macOS.
    const LOCAL_CHROME_EXECUTABLE = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'

    export default async function () {
    // Edge executable will return an empty string locally.
    const executablePath = await edgeChromium.executablePath || LOCAL_CHROME_EXECUTABLE

    const browser = await puppeteer.launch({
    executablePath,
    args: edgeChromium.args,
    headless: false,
    })

    const page = await browser.newPage()
    await page.goto('https://github.com')
    }
    ```

    ### Configure your Vercel deployment

    #### Choose Node.js 14.x

    `puppeteer-core@10` doesn't work well with newer versions of Node.js. The pinned version should be Node.js 14.

    1. Go to your Vercel project.
    2. Go to "Settings", then "General".
    3. Locate the "Node.js version" section.
    4. Select "Node 14".

    <img width="943" alt="Screen Shot 2022-10-22 at 13 11 56" src="https://user-images.githubusercontent.com/14984911/197335971-a2a141bc-141c-4e68-b337-1f7db438ed4b.png">

    In addition to configuring this on Vercel, make sure that your project's `package.json` doesn't have the `engines.node` property that would contradict your choise:

    ```jsonc
    {
    "engines": {
    // If you have a newer version of Node in your package.json
    // Vercel will respect that and disregard what you've set
    // in your project's settings.
    "node": "14.x"
    }
    }
    ```

    ---

    ## Troubleshooting

    - ...