Puppeteer部署报错SyntaxError: Unexpected token '??='求助

问题描述 #

本地运行正常的Puppeteer生成PDF代码，部署至Render或Docker环境时触发SyntaxError，错误指向Puppeteer依赖文件中的??=运算符。

相关代码 #

import puppeteer from 'puppeteer';
import { fileURLToPath } from 'url';
import path from 'path';

export const pdfMaker = async ({ name, id }) => {
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);

  // Launch a headless Chrome browser
  const browser = await puppeteer.launch();

  // Open a new page
  const page = await browser.newPage();

  // Navigate to a website
  await page.goto(`http://localhost:3000/record/pdf/${id}`);

  // Set the viewport to cover the entire page
  await page.setViewport({ width: 640, height: 100 });

  // Generate PDF of the entire page
  await page.pdf({
    path: `uploads/pdfs/${id}.pdf`,
    format: 'A4',
    printBackground: true,
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
  });

  // Close the browser
  await browser.close();
};

错误信息 #

**********************ERROR-************************
file:///app/node_modules/puppeteer/lib/esm/puppeteer/getConfiguration.js:88
    configuration.experiments ??= {};
                              ^^^

SyntaxError: Unexpected token '??='
    at Loader.moduleStrategy (internal/modules/esm/translators.js:149:18)

错误原因 #

??=是空值合并赋值运算符，属于ES2021新增语法。本地环境使用的Node.js版本较高（v16.0.0及以上），原生支持该语法；而部署环境（Render/Docker）的Node.js版本过低，不支持该语法，导致解析失败。

解决方案 #

1. 升级部署环境的Node.js版本 #

• 本地运行node -v确认当前使用的Node.js版本（建议v18+）
• Docker环境：在Dockerfile中指定高版本Node镜像，示例：

  FROM node:18-alpine
  # 后续构建步骤...
  

• Render环境：在项目根目录的package.json中添加engines字段，强制指定Node.js版本：

  {
    "engines": {
      "node": ">=18.x"
    }
  }
  

  部署时Render会自动使用指定版本的Node.js

2. 降级Puppeteer版本（无法升级Node时可选） #

如果部署环境无法升级Node.js，选择一个不依赖ES2021语法的Puppeteer旧版本，示例：

npm install puppeteer@19.x --save

注意：旧版本可能存在安全漏洞或功能缺失，需根据实际需求评估。

3. 使用Babel转译语法（可选） #

通过Babel将ES2021语法转译为部署环境支持的语法：

• 安装Babel依赖：

  npm install @babel/core @babel/cli @babel/preset-env @babel/node --save-dev
  

• 创建.babelrc配置文件：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }]
    ]
  }
  

• 修改项目启动命令，使用Babel转译后运行，示例：

  {
    "scripts": {
      "start": "babel-node src/your-entry-file.js"
    }
  }
  

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