执行npm run build或部署Vercel时因Webpack错误构建失败

为啥会出这问题 #

这错误是chromium-bidi模块的processingQueue.js里存在语法bug——使用了未在类中正确声明的私有字段#catch。开发模式下Next.js的语法校验比较宽松，你注释本地文件能临时跑起来，但构建或部署时会直接读取node_modules里的原模块代码，所以注释本地文件完全没用。

具体修复步骤 #

• 锁死chromium-bidi稳定版本：安装一个无语法问题的旧版本，执行命令：

  npm install chromium-bidi@0.4.22 --save-exact
  

  这样就能避免自动升级到有bug的版本。
• 让Next.js跳过该模块的语法检查：在next.config.js中添加以下配置：

  module.exports = {
    transpilePackages: ['chromium-bidi'],
    eslint: {
      ignoreDuringBuilds: true,
    },
  }
  

  要是不想全局关闭ESLint检查，也可以在.eslintignore文件里添加一行node_modules/chromium-bidi，只忽略该模块的校验。
• 降级Puppeteer版本：因为chromium-bidi是Puppeteer的依赖，换一个兼容的Puppeteer版本也能解决问题：

  npm install puppeteer@21.7.0 --save-exact
  

• 动态导入Puppeteer：在app/api/getItem/route.ts中改用动态加载方式，避免构建阶段触发模块的语法校验：

  export async function GET(request: Request) {
    const puppeteer = await import('puppeteer');
    // 你的亚马逊商品抓取逻辑写在这里
  }
  

额外提醒 #

• 部署到Vercel时，如果遇到Chromium安装失败，可在package.json中添加"postinstall": "puppeteer install"，确保依赖能正确安装。
• 本地测试构建前，先删除node_modules和.next文件夹，再重新执行npm install和npm run build，避免缓存干扰导致问题残留。

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