Puppeteer does not work on vercel plattform

[28development]

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

npm run build

Describe the Bug

I am using puppeteer in my API routes. I basically go to a page and generate a pdf file and sent an email.
This works perfectly fine locally, but it does not work on vercel.

I get a 500 error code with following message:

[POST] /api/sendgrid
21:54:39:79
2021-10-17T19:54:40.690Z	089c6c73-09af-48cb-a740-be76fc06b7a0	ERROR	Error: Could not find expected browser (chrome) locally. Run `npm install` to download the correct Chromium revision (901912).
    at ChromeLauncher.launch (/var/task/node_modules/puppeteer/lib/cjs/puppeteer/node/Launcher.js:88:27)

Expected Behavior

I expect to have a successful call so that puppeteer can generate a pdf from my page URL.

To Reproduce

You can probably reproduce this creating an api file and calling that using fetch or axios.
One needs to install puppeteer and call a function like this:

async function generatePdf() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // GEN_PDF_URL, is the URL which shall be generated later on to a pdf file
  await page.goto(process.env.GEN_PDF_URL, {
    waitUntil: "networkidle2",
  });
  const pdf = await page.pdf({
    path: 'wahlkalender.pdf',
    printBackground: true,
    format: 'a4',
  });
  await browser.close();

  return pdf;
}

[neg4n]

Hey! I think you need https://www.npmjs.com/package/chrome-aws-lambda to get this working

[28development]

@neg4n Hi thanks for your answer I will try to update it this evening, do you know why this is happening. Is this due to running it on a serverless function?

[28development]

Ok so I had to tweak a few things, took me hours. For this usecase I did create a blogpost which explains the solution in detail.
Puppeteer with NextJS on Vercel

[Kais3rP]

Unfortunately this doesn't work if you are using some package like puppeteer-stream which internally use the standard puppeteer to launch the browser !

[brunocalou]

I tried it on a project of mine but still, couldn't make it work on Vercel. I used chrome-aws-lambda and I've tried to run it with puppeteer-core and with playwright-core. None of the solutions worked, despite working locally. Also, the compressed size of the lambda function was 46.4 MB on my latest test.

[anshvijay28]

Hey the blog post is down! Any chance you could reboot it?

[nkdram]

Are there any workaround for this issue ? Still I am not able to run the puppeteer in vercel. I have the chrome-aws-lambda that exceeds the allowed serverless function size.

I hope we would be running into the same issue even if we use the playwright-core as the issue is with the size of the chrome-aws-lambda itself.

[jelhouss]

This is an answer just to brainstorm ideas. It could be helpful for other people. I am just kinda lazy to try this, but I guess there are two solutions I think of:

1. As puppeteer + Next.js work on localhost, you can generate a PDF file at runtime using an API route with puppeteer, save that PDF and just put it in the /public directory for static hosting, and then download it from there in prod.
2. And this is better I guess, to use puppeteer in a standalone Node script and use it programmatically to generate a PDF. Run this script after building your Next.js site so that puppeteer can access the HTML page, and this script simply runs automatically in the postbuild script. It will be automatic.

I find these two good approaches to generate your PDF, but if there is an API route that could run puppeteer in production that will be much better.

[LuanCKRG]

anyone know how use puppeteer on nextjs 13?

[tomimacia]

I tried lots of solutions, none of them worked until i found this, https://www.npmjs.com/package/@sparticuz/chromium. Hope it works!