webpacknext.jspuppeteernext.js13

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


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.


Solution

  • 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