Is it possible to run Puppeteer in an API route of a NextJS app on Netlify?

Support
1

I cannot deploy code that runs Puppeteer as part of a NextJS app.

I prepared a minimalist NextJS app which is using Puppeteer in an API entry point. The code is available at GitHub - phbernard/issue-puppeteer-nextjs-netlify and the Netlify site is issue-puppeteer-nextjs-netlify (but this site was never successfully deployed).

To recreate the app from scratch:

  1. Create the app with npx create-next-app@latest
  2. Install Puppeteer with yarn add puppeteer-core chrome-aws-lambda
  3. Set target in next.config.js:
module.exports = {
  reactStrictMode: true,
  target: "experimental-serverless-trace"
}
  1. Populate pages/api/puppeteer.js with:
import chromium from 'chrome-aws-lambda';

export default async function handler(req, res) {
  const browser = await chromium.puppeteer.launch({
    executablePath: await chromium.executablePath,
    args: chromium.args,
    headless: chromium.headless
  });

  res.status(200).json({ name: 'John Doe' })
}

(this code does not even generate anything, it just starts Chrome)

When deployed to Netlify, the build fails at Deploy step with:

Request must be smaller than 69905067 bytes for the CreateFunction operation

Note :

  • This app can be deployed successfully to Vercel.
  • Some similar code can run as a pure Netlify Function.

While I understand AWS Lambda limitations apply here, I was wondering if there was any proof of concept around to demonstrate Puppeteer+NextJS+Netlify.

3

hi there! after some discussion, we think we need to create a bit more space for puppeteer to run successfully.

Our next pros suggested using ESbuild bundler for functions, as this might help decrease file size. Can you try that and see if that changes/fixes anything?

4

Hi Perry! Thank you for the suggestion.

What I tried:

Unfortunately, both attempts gave the same result: the function is still too large.

5

Hi @Philippe

I believe @perry is talking about using esbuild instead of zisi (default) for functions e.g. in a netlify.toml

[functions]
  node_bundler = "esbuild"
6

yes, thanks @coelmay ! that is what i meant. can you try this, @Philippe , and see if it changes anything?

7

Oh, thank you @coelmay for clarifying!

I added the netlify.toml config to enable ESbuild: it works! The project can now be deployed. Great!

Unfortunately, I run into another issue at runtime. I added a few lines of code to make Puppeteer create a simple image.

On Vercel, I get the image when visiting /api/image.

On Netlify, I get an error:

{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module '/var/task/.netlify/functions-internal/next_api_image/puppeteer/lib/Browser'
Require stack:
- /var/task/.netlify/functions-internal/next_api_image/next_api_image.js
- /var/task/next_api_image.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js","trace":[
  "Runtime.UnhandledPromiseRejection: Error: Cannot find module '/var/task/.netlify/functions-internal/next_api_image/puppeteer/lib/Browser'","Require stack:",
  "- /var/task/.netlify/functions-internal/next_api_image/next_api_image.js",
  "- /var/task/next_api_image.js",
  "- /var/runtime/UserFunction.js",
  "- /var/runtime/index.js",
  "    at process.<anonymous> (/var/runtime/index.js:35:15)",
  "    at process.emit (events.js:314:20)",
  "    at processPromiseRejections (internal/process/promises.js:209:33)",
  "    at processTicksAndRejections (internal/process/task_queues.js:98:32)"
]}

Not sure if this is due to ESbuild or if this error would have shown up whatever the situation.

Puppeteer is definitely not your regular package, so it’s not surprising to encounter a couple of issues.

8

Great to hear it worked @Philippe

As for the new error, suggest having a read over the thread Runtime.UnhandledPromiseRejection on my Next.js app.

There are also some other threads with this error, namely NextJS cryptic React error on refresh and Next.js deploy fails on webpack build.

9

Thanks for the links! Not exactly the same issue, yet a source of inspiration :slight_smile:

I tried tu use @netlify/plugin-nextjs-experimental: the issue is different but very similar.

When I posted my question, that was a memory problem and not a bug. But now that the project builds and behaves differently on Netlify and Vercel, my feeling is that it should be reported as an issue to the netlify-plugin-nextjs team. Would you confirm?

1 Like
10

There are two open issues which reference Runtime.UnhandledPromiseRejection, one begin by the OP of the last thread I linked previously.

You might like to contribute to these, or if you feel your issue is different, open a new one. Linking back to this thread also helpful.