DEV Community

Cassidy Williams
Cassidy Williams

Posted on • Originally published at cassidoo.co on

Making Puppeteer work at build time on Netlify

I wrote a Node script recently that installed Puppeteer, and that script ran at build time for a website I was working on.

When I ran npm run build locally, it worked just fine, but on Netlify, it failed silently.

When I looked at the logs, I found this error:

> Error: Could not find Chrome (ver. 137.0.7151.55). This can occur if either
> 1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) 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.
> at ChromeLauncher.resolveExecutablePath
> (file:///opt/build/repo/node_modules/puppeteer-core/lib/esm/puppeteer/node/BrowserLauncher.js:272:27)
> at ChromeLauncher.computeLaunchArguments (file:///opt/build/repo/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:85:24)
> at async ChromeLauncher.launch (file:///opt/build/repo/node_modules/puppeteer-core/lib/esm/puppeteer/node/BrowserLauncher.js:48:28)
...
Enter fullscreen mode Exit fullscreen mode

After a bunch of trial and error and searching online for solutions I found two ways that worked:

The Chromium integration/build plugin

Install the Chromium integration in the Netlify UI, or in your netlify.toml:

[[plugins]]
package = "netlify-plugin-chromium"
Enter fullscreen mode Exit fullscreen mode

The integration hooks into installation stage of my site's build, and checks if Chromium is installed (and if not, installs it and adds a CHROME_PATH environment variable), and installs Chromium binaries if needed.

After hitting the "Enable integration" button, you can trigger a new build, and voilà, the Chromium missing error should be gone!

Via package.json

You can also install Chrome via a prebuild script in your package.json.

"scripts": {
  "prebuild": "npx puppeteer browsers install chrome",
    // ...
}
Enter fullscreen mode Exit fullscreen mode

I personally noticed that I ran into some caching issues with the first option, but it might depend on your setup. Both of these options should work for serverless functions, too, if that's where you're running into the problem!

This was a really nice solution to not have to change any of my code to get it working! Hopefully this is helpful for ya!

DevCycle image

Fast, Flexible Releases with OpenFeature Built-in

Ship faster on the first feature management platform with OpenFeature built-in to all of our open source SDKs.

Start shipping

Top comments (1)

Collapse
 
dreama profile image
Dream

Thanks for sharing these helpful solutions for getting Puppeteer to work during Netlify builds. Hitting a silent failure like that can be really frustrating, especially when everything runs perfectly on your local machine. It’s great that you not only tracked down the cause but also documented two clear workarounds that can save others a lot of time. Including the option to use a build plugin or a prebuild script in the package.json gives people flexibility depending on their workflow, and your notes about potential caching issues are especially useful for troubleshooting. I appreciate the concise explanations and example snippets—it makes this guide easy to follow. This will definitely come in handy for developers running into similar Chromium-related errors with Puppeteer on Netlify.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

👋 Kindness is contagious

Discover this thought-provoking article in the thriving DEV Community. Developers of every background are encouraged to jump in, share expertise, and uplift our collective knowledge.

A simple "thank you" can make someone's day—drop your kudos in the comments!

On DEV, spreading insights lights the path forward and bonds us. If you appreciated this write-up, a brief note of appreciation to the author speaks volumes.

Get Started