Vercel Serverless Function 500 Error: Failed to download Chromium for Puppeteer

[rohan0maske-sys]

Summary

I am trying to generate a PDF using Puppeteer in a Next.js API route (/api/generate-invoice) deployed on Vercel.

However, it is crashing with a 500 Internal Server Error because it's trying to download Chromium at runtime, but it fails since the Vercel serverless environment has a read-only filesystem (except for /tmp).

How can I correctly configure Puppeteer to work on Vercel Node.js 18.x without running into this Chromium download error?

Additional information

Here are the logs from Vercel:

[PCR] Failed to create download dir: /home/sbx_user1051/.chromium-browser-snapshots
[PCR] Puppeteer version: 21.11.0
[PCR] Browser platform: linux
[PCR] Chromium revision: 1302491
[PCR] Error: ENOENT: no such file or directory, mkdir '/home/sbx_user1051'
[PCR] ERROR: Failed to download Chromium after retry 3 times.

Error: An executablePath or channel must be specified for puppeteer-core
...
TypeError: Cannot read properties of undefined (reading 'newPage')

Environment:
- Production
- Runtime: Node.js 18.x
- Memory Limit: 1024 MB

Example

No response

[rohan-xtha]

The issue is that standard Puppeteer tries to download Chromium at runtime, but Vercel's serverless environment is read-only.

To fix this, you need to use @sparticuz/chromium alongside puppeteer-core.

1. Install dependencies:

bash
npm install @sparticuz/chromium puppeteer-core
2. Update your code to use the bundled Chromium:

js
import chromium from "@sparticuz/chromium";
import puppeteer from "puppeteer-core";
export default async function handler(req, res) {
const browser = await puppeteer.launch({
args: chromium.args,
defaultViewport: chromium.defaultViewport,
executablePath: await chromium.executablePath(),
headless: chromium.headless,
});
const page = await browser.newPage();
// Generate your invoice...
await browser.close();
}
This avoids the download step and uses a Chromium binary specifically compiled for serverless!