puppeteer: [Bug]: Puppeteer fails to find Chromium on Render.com

Thanks for your comments and quick answers, @OrKoN. I wanted to let you know that I’ve made progress on my issue with Puppeteer and Render.com.

Following your suggestion and a comment from Victor on this Puppeteer issue, I created a puppeteer.config.cjs file with the following code:

const { join } = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

I then uninstalled and reinstalled Puppeteer and deployed my project on Render.com. I’m happy to report that everything now works as it should.

Thanks again for your help.

If anyone else has the same issue when deploying on Render.com, here is a small example repository

Hi there, I’m a member of the Render support team. We do get a number of tickets and forum posts on this subject, but I don’t think it’s the Puppeteer maintainers responsibility to worry about where their package is deployed.

TL;DR; On Render, install Chrome at build time, to a path that is carried over from the build to runtime.

The quickest solution I found for this was setting the PUPPETEER_CACHE_DIR environment variable (docs) to /opt/render/project/.puppeteer

However, as the node_packages directory is cached by default (and the path above isn’t), the Puppeteer-included Chrome installer doesn’t run if the next deploy uses the already installed node_modules in the build cache. The immediate workaround would be to do a manual deploy with a clear build cache, so that the Chrome installer runs when the Puppeteer package is reinstalled. But that’s not a great user experience.

It’s on my list to add a Puppeteer guide to the Render docs and/or an example repo to https://github.com/render-examples. It wouldn’t be much more than what I’ve described above, but I plan to include a simple build script to check Chrome is installed and also added to/pulled from the Render service build cache. I don’t have an ETA, it depends on my other workload.

It would be unlikely that we would add any auto copying/syncing features, we keep our Native Environments predictable and flexible enough to achieve a lot of customization with a build script, there’s no “magic” to reduce anything unexpected.

For some reason, none of what was said here worked for me, however i managed to get it working by running the command npm install && node node_modules/puppeteer/install.js && node app.js in the Command field, the command to run periodically. and npm install && node node_modules/puppeteer/install.js in the Build Command field.

Hope that helps for anyone still facing this issue.

Render.com deployment fails because since Puppeteer v19.0.0, Puppeteer downloads and installs Chromium by default in $HOME/.cache/puppeteer, which is not present in Render.com’s production environment. Without adding a config file to the root of the project, the deployment on Render.com will throw an error when running Puppeteer:

"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/render/.cache/puppeteer)."

To further investigate the issue, I created this reproduction repo and ran commands to debug what was present at which path (logging the executable path for Puppeteer and the path to Chrome).

I first ran these in the build environment:

$node -e "console.log(require('puppeteer').executablePath())"
/opt/render/.cache/puppeteer/chrome/linux-1095492/chrome-linux/chrome

$find / -name chrome | grep puppeteer | grep -v node_modules
/opt/render/.cache/puppeteer/chrome
/opt/render/.cache/puppeteer/chrome/linux-1095492/chrome-linux/chrome

However, running the same commands in the Render.com production environment resulted in an error for the executable path and no path for Chrome.

Feb 27 10:30:03 AM /opt/render/project/src/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:127
Feb 27 10:30:03 AM throw new Error(`Could not find Chromium (rev. ${this.puppeteer.browserRevision}). This can occur if either\n` +
Feb 27 10:30:03 AM ^
Feb 27 10:30:03 AM
Feb 27 10:30:03 AM Error: Could not find Chromium (rev. 1095492). This can occur if either
Feb 27 10:30:03 AM 1. you did not perform an installation before running the script (e.g. `npm install`) or
Feb 27 10:30:03 AM 2. your cache path is incorrectly configured (which is: /opt/render/.cache/puppeteer).
Feb 27 10:30:03 AM For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
Feb 27 10:30:03 AM at ChromeLauncher.resolveExecutablePath (/opt/render/project/src/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:127:27)
Feb 27 10:30:03 AM at ChromeLauncher.executablePath (/opt/render/project/src/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js:206:25)
Feb 27 10:30:03 AM at PuppeteerNode.executablePath (/opt/render/project/src/node_modules/puppeteer-core/lib/cjs/puppeteer/node/PuppeteerNode.js:162:105)

I looked through the Render.com documentation on how to copy over specific files from the build environment to the production environment but did not find anything. The docs page Deploy Puppeteer with Node also does not offer any specific configuration for Puppeteer.

I reported the problem of Puppeteer failing to find Chromium on Render.com in this issue, which led to @OrKon updating the Puppeteer docs with information related to the problem.

Searching the issues also led me to a related problem encountered by @VictorAssis deploying Puppeteer to Heroku on the Puppeteer repository. This led me to a workaround for my issue:

I created a puppeteer.config.cjs file in the project’s root directory, configuring the cacheDirectory option to specify the location for Puppeteer’s cached data. You can reference an example of this configuration file in the documentation.

const { join } = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};

By setting the cacheDirectory option to __dirname/.cache/puppeteer in the puppeteer.config.cjs file at the root of the project, it is specifying a cache directory that Puppeteer should use for storing and accessing Chrome. By using the same cache directory for both environments, we can ensure that Puppeteer can find the correct path for Chrome when deploying on Render.com. This resolved the issue of Puppeteer being unable to find the Chromium browser in the production environment. To confirm that Chrome was installed at the same path, I ran the same commands and verified that it was located at /opt/render/project/src/.cache/puppeteer/chrome/linux-1095492/chrome-linux/chrome.

$node -e "console.log(require('puppeteer').executablePath())"
/opt/render/project/src/.cache/puppeteer/chrome/linux-1095492/chrome-linux/chrome

$find / -name chrome | grep puppeteer | grep -v node_modules
/opt/render/project/src/.cache/puppeteer/chrome
/opt/render/project/src/.cache/puppeteer/chrome/linux-1095492/chrome-linux/chrome

cc @aduong, @AnalogMemory, @anurag, @jimthoburn, @ohbh

@OrKoN I think this is a serious footgun in the latest versions of Puppeteer:

1. Follow the installation guide to install on your local machine -> works ✅
2. Deploy to production on Heroku, Render.com or other services -> breaks ❌ (with confusing error)

Confusing 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/render/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.

This is confusing because:

• users will not necessarily know / remember that "puppeteer" in their package.json is causing download of Chromium
• users will be looking in their CI / hosting scripts for a missing npm install, yarn install, etc, which is actually not missing - the install of Puppeteer is just currently broken on these environments
• users will not know what the correct path to a “working cache path” will be
• users will not be able to find a “working cache path” anywhere in the docs, and so they will have to resort to searching through issues, and maybe finding the buried post of Victor

This is a poor DX to make users go through.

There have already been multiple issues created about this (#9581 by @LMS5413, #9592 by @MaxAryus) , and there will be more coming if this isn’t resolved properly.

Some suggested solutions, based on the premise of stability of the ecosystem which I guess that you can agree with:

Puppeteer and other packages should strive to be:

• zero-configuration
• compatible with popular hosting and CI infrastructure

Suggested Solution 1 (probably best for everyone):

So the best option here would be for Puppeteer to be compatible out of the box with the way that both CI and hosting infrastructure works - no config needed.

Suggested Solution 2 (not great experience for developers, but avoids issue spam here):

If there is a configuration option that should be applied to CI and hosting environments, then call this out in the docs within the Installation section (not the Configuration subheading, which implies it’s a choice) to show that it’s a mandatory step to not have Puppeteer crash and burn when deployed to common hosting providers.