"Cannot statically analyse require" when using puppeteer-extra plugins and webpack nextjs13

Question

I am trying to use plugins in puppeteer-cluster but it does not work. It works without plugins but not when plugins are added.

Here is my code:

import { NextResponse } from "next/server";
import { Cluster } from "puppeteer-cluster";
// import vanillaPuppeteer from "puppeteer";
import { addExtra } from "puppeteer-extra";
import Stealth from "puppeteer-extra-plugin-stealth";
import Recaptcha from "puppeteer-extra-plugin-recaptcha";

export async function POST(req: Request) {
  const body = await req.json();

  const puppeteer = addExtra(vanillaPuppeteer);
  puppeteer.use(Stealth());
  puppeteer.use(Recaptcha());

  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 3,
  });
// ...

I try to run it but it returns this error:

Cannot statically analyse 'require(…, …)' in line 7

I tried using lazy loader but it just doesn't work.

Answer 1

For now, the workaroud is to add puppeteer-extra and its plugins to serverComponentsExternalPackages field in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      'puppeteer-extra', 
      'puppeteer-extra-plugin-stealth',
      'puppeteer-extra-plugin-recaptcha',
    ],
  },
};

module.exports = nextConfig;

Read more about serverComponentsExternalPackages: https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages