Next.js13中Puppeteer-Extra插件与Webpack报错：无法静态分析require

问题根源分析 #

你遇到的Cannot statically analyse 'require(…, …)'错误，核心原因有三点：

1. 缺失核心依赖导入：代码注释掉了vanillaPuppeteer的导入语句，但后续直接使用了该变量，触发编译异常。
2. Next.js静态编译限制：puppeteer-extra-plugin-stealth等插件内部使用了带额外参数的require语法，Next.js默认Webpack配置无法静态分析这类动态导入。
3. 未关联自定义puppeteer实例：你创建了带插件的puppeteer实例，但未告知puppeteer-cluster使用该实例，导致插件完全不生效。

分步解决方案 #

1. 修复依赖导入并关联自定义puppeteer到集群 #

首先取消vanillaPuppeteer的导入注释，同时在集群启动时传入自定义的puppeteer实例：

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();

  // 配置带插件的puppeteer实例
  const puppeteer = addExtra(vanillaPuppeteer);
  puppeteer.use(Stealth());
  // Recaptcha插件必须配置服务商密钥才能生效，否则会异常
  puppeteer.use(Recaptcha({
    provider: { id: "2captcha", token: "YOUR_2CAPTCHA_TOKEN" } // 替换为你的实际密钥
  }));

  // 启动集群时传入自定义puppeteer实例
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 3,
    puppeteer: puppeteer, // 关键：让集群使用带插件的puppeteer
    puppeteerOptions: {
      headless: "new", // 建议使用新版无头模式提升兼容性
      args: ["--no-sandbox"] // 避免Serverless环境权限问题
    }
  });

  // 集群任务逻辑示例
  await cluster.task(async ({ page, data }) => {
    // 你的页面操作代码
    await page.goto(data.url);
    // ...其他操作
  });

  // 提交任务并清理资源
  await cluster.queue(body.taskData);
  await cluster.idle();
  await cluster.close();

  return NextResponse.json({ success: true });
}

2. 修改Next.js配置绕过静态分析限制 #

在项目根目录的next.config.js中添加Webpack配置，允许处理动态require：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 将puppeteer相关包标记为外部依赖，避免静态编译冲突
    config.externals = [...config.externals, { puppeteer: "commonjs puppeteer" }];
    // 允许处理带额外参数的require语法
    config.module.rules.push({
      test: /\.js$/,
      enforce: "pre",
      use: ["source-map-loader"],
    });
    return config;
  },
  // Next.js 13+ App Router需开启此配置，避免Server Component冲突
  experimental: {
    serverComponentsExternalPackages: ["puppeteer", "puppeteer-cluster", "puppeteer-extra"]
  }
};

module.exports = nextConfig;

3. 备用方案：动态导入依赖 #

如果上述配置仍有问题，可改用动态导入方式避开静态编译检查：

export async function POST(req: Request) {
  const body = await req.json();
  
  // 动态导入所有puppeteer相关依赖
  const { addExtra } = await import("puppeteer-extra");
  const vanillaPuppeteer = (await import("puppeteer")).default;
  const Stealth = (await import("puppeteer-extra-plugin-stealth")).default;
  const Recaptcha = (await import("puppeteer-extra-plugin-recaptcha")).default;

  const puppeteer = addExtra(vanillaPuppeteer);
  puppeteer.use(Stealth());
  puppeteer.use(Recaptcha({ provider: { id: "2captcha", token: "YOUR_TOKEN" } }));

  // 后续集群配置同前...
}

内容的提问来源于stack exchange，提问作者Ninja