Repairing the 'Could Not Find Chrome (ver. 130.0.6723.116)' Puppeteer Chrome Error on Vercel Deployment

Solution 1: Configuring Puppeteer to Install Chrome Correctly on Vercel

This Node.js-based backend solution configures Puppeteer’s cache path and installation commands to ensure Chrome installs correctly.

const puppeteer = require('puppeteer');
const path = require('path');
const { v4: uuid } = require('uuid');
const fs = require('fs');

// Main screenshot function
const screenshot = async (req, res) => {
    const url = req.query.url;
    if (!url) {
        return res.status(400).json({ message: 'URL is required' });
    }

    let browser;
    try {
        // Launch Puppeteer with specific Chrome executable path and options
        browser = await puppeteer.launch({
            ignoreHTTPSErrors: true,
            executablePath: process.env.CHROME_PATH || '/opt/bin/chromium',
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });

        const page = await browser.newPage();
        await page.goto(url, { waitUntil: 'networkidle2' });
        await page.setViewport({ width: 1920, height: 1080 });

        const fileName = \`${uuid()}.png\`;
        const screenshotPath = path.join(__dirname, '..', 'public', fileName);
        await page.screenshot({ path: screenshotPath });

        res.json({ screenshotPath: \`/image/\${fileName}\` });
    } catch (err) {
        console.error('Error capturing screenshot:', err);
        res.status(500).json({ error: 'Failed to capture screenshot' });
    } finally {
        if (browser) await browser.close();
    }
};

module.exports = screenshot;

Solution 2: Custom Puppeteer Configuration for Vercel with a .puppeteerrc.cjs File

This solution adjusts Puppeteer’s configuration file (.puppeteerrc.cjs) to specify the Chrome cache path and ensure compatibility with Vercel’s file structure.

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

/
 * @type {import('puppeteer').Configuration}
 */
module.exports = {
    // Specify cache directory for Puppeteer
    cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
    // Specify which Chromium version Puppeteer should install
    executablePath: '/opt/bin/chromium',
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
};

Solution 3: Implementing Environment Variables and Scripts in package.json for Puppeteer

This approach modifies the package.json file to install specific Chrome binaries and set up Puppeteer configurations automatically during deployment.

// Add to package.json
"scripts": {
    "postinstall": "npx puppeteer install --path ./.cache/puppeteer",
    "start": "node index.js"
}
// Configure environment variable in Vercel
process.env.CHROME_PATH = "/opt/bin/chromium";

Unit Test for Puppeteer Screenshot Functionality

This Node.js Mocha test script verifies Puppeteer’s ability to capture a screenshot from a URL in various environments.

const chai = require('chai');
const chaiHttp = require('chai-http');
const app = require('../app'); // Express app where screenshot endpoint is defined
chai.use(chaiHttp);
const expect = chai.expect;
describe('Screenshot API', () => {
    it('should return an error for missing URL parameter', (done) => {
        chai.request(app)
            .get('/screenshot')
            .end((err, res) => {
                expect(res).to.have.status(400);
                expect(res.body).to.have.property('message').eql('URL is required');
                done();
            });
    });
    it('should capture a screenshot successfully for a valid URL', (done) => {
        chai.request(app)
            .get('/screenshot?url=https://example.com')
            .end((err, res) => {
                expect(res).to.have.status(200);
                expect(res.body).to.have.property('screenshotPath');
                done();
            });
    });
});

Common Questions About Puppeteer and Cloud Deployments

1. Why do I get “Could not find Chrome” errors on cloud platforms?
2. These errors often occur because cloud platforms don’t include the full Chrome binary by default. You can fix this by specifying executablePath in your Puppeteer setup.
3. How do I ensure Puppeteer works on both local and cloud environments?
4. Using executablePath and args with cloud-friendly flags like --no-sandbox can make your setup flexible enough for both environments.
5. What does the --no-sandbox flag do in Puppeteer?
6. The --no-sandbox flag disables Chrome’s sandbox security, which allows Puppeteer to run on cloud services that don’t support sandboxing, but it should be used with caution.
7. Why do I need a custom cacheDirectory for Puppeteer?
8. Setting a custom cacheDirectory ensures that Puppeteer downloads Chrome binaries to a known location, which can prevent errors during deployment, especially in serverless environments.
9. What is the purpose of the networkidle2 option in the goto method?
10. The networkidle2 option waits until there are no more than two active network connections. This is useful for capturing a fully loaded page and handling dynamic content.
11. Can Puppeteer work without a specified Chrome version?
12. Yes, but it’s recommended to specify executablePath and ensure a compatible Chrome version is accessible for consistent results in cloud setups.
13. How do I manage Puppeteer cache across different environments?
14. You can specify a universal cacheDirectory in the .puppeteerrc.cjs file, allowing Puppeteer to find Chrome binaries across platforms like Vercel and Heroku.
15. Is puppeteer-core different from puppeteer?
16. Yes, puppeteer-core excludes bundled Chrome to reduce size, so you’ll need to specify a Chrome binary. The full puppeteer package includes Chrome automatically.
17. What should I do if Puppeteer is slow on cloud environments?
18. Optimizing viewport settings and disabling unneeded options like devtools can improve performance in resource-constrained environments.
19. Is Puppeteer compatible with all cloud providers?
20. Generally, yes, but each provider may have unique requirements. Using cloud-friendly settings like --no-sandbox ensures better compatibility.

Final Thoughts on Getting Puppeteer to Run on Vercel

Successfully deploying Puppeteer on Vercel requires understanding the specific setup needs for Chrome. Specifying launch options and correctly configuring Puppeteer’s cache paths help prevent the frustrating "Could not find Chrome" error. These adjustments ensure Puppeteer functions reliably across both local and cloud environments. 🚀

Once you adapt these solutions to your project, capturing screenshots from user-provided URLs becomes seamless, allowing for more dynamic web applications. With proper setup, Puppeteer remains an invaluable tool for automation and web scraping, even on serverless platforms like Vercel.