Zach’s ugly mug (his face) Zach Leatherman

'Could not find Chromium' with Puppeteer 19

February 13, 2023

Kept seeing this error on my Netlify builds of the Speedlify project after upgrading to Puppeteer 19:

/opt/build/repo/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:127

Error: Could not find Chromium (rev. 1095492). This can occur if either
 1. you did not perform an installation before running the script (e.g. `npm install`) or
 2. your cache path is incorrectly configured (which is: /opt/buildhome/.cache/puppeteer).

For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.

With Puppeteer 19, the Chromium download has been moved to a new folder: ~/.cache/puppeteer (on Netlify this is /opt/buildhome/.cache/puppeteer/).

The problem here is that Puppeteer only downloads Chromium when it is installed and the folder it downloads to is outside of the expected and previously working folders that Netlify persists across builds (like node_modules).

The solution here is to either move this Chromium download folder to a location that does get persisted (via PUPPETEER_CACHE_DIR environment variable or a puppeteer.config.cjs config file) or persist it yourself via a Netlify build plugin.

I chose the latter. The netlify-plugin-cache build plugin will probably do this for you, but its so few lines of code that I used my own:

Expand to see the keep-data-cache Netlify build plugin
// speedlify/plugins/keep-data-cache/index.js
module.exports = {
  async onPreBuild({ utils }) {
    await utils.cache.restore('/opt/buildhome/.cache/puppeteer/');
  },

  async onPostBuild({ utils }) {
    await utils.cache.save('/opt/buildhome/.cache/puppeteer/');
  }
};

which is referenced in my netlify.toml:

# netlify.toml
[[plugins]]
package = "./plugins/keep-data-cache"

You can see this in action on the speedlify project.

After applying this change, make sure you force Netlify to reinstall your node_modules by clearing the build cache or changing a dependency version in your package.json.


< Newer
The JavaScript Site Generator Review, 2023
Older >
A Historical Reference of React Criticism

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

6 Reposts

IndieWeb Avatar for https://rensaba-programer.jpRyan MulliganNicolas HoizeyAlex RussellEgor Klooskeith kurson

8 Likes

Keeley (VerteDinde)kaiserkiwi :kiwibird:Alex0007Thomas Broyertambourineman@mastodon.cloudSimon Cox :SEO:Egor KloosAlex Russell
3 Comments
  1. Nicolas Hoizey

    @zachleat good to know, thanks!

  2. Egor Kloos

    @zachleat I ran into this the other day. Hadn’t time to look at it. Thanks!

  3. Zach Leatherman :11ty:

    @dutchcelt yay! blog post success 🏆

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)