使用Puppeteer遇SyntaxError：import语句无法在模块外使用求助

问题情况 #

运行以下Puppeteer测试代码时，持续触发SyntaxError: Cannot use import statement outside a module错误，已重装Node.js和npm，问题未解决。

测试代码 #

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://developers.google.com/web/');

  // Type into search box.
  await page.type('.devsite-search-field', 'Headless Chrome');

  // Wait for suggest overlay to appear and click "show all results".
  const allResultsSelector = '.devsite-suggest-all-results';
  await page.waitForSelector(allResultsSelector);
  await page.click(allResultsSelector);

  // Wait for the results page to load and display the results.
  const resultsSelector = '.gsc-results .gs-title';
  await page.waitForSelector(resultsSelector);

  // Extract the results from the page.
  const links = await page.evaluate(resultsSelector => {
    return [...document.querySelectorAll(resultsSelector)].map(anchor => {
      const title = anchor.textContent.split('|')[0].trim();
      return `${title} - ${anchor.href}`;
    });
  }, resultsSelector);

  // Print all the files.
  console.log(links.join('\n'));

  await browser.close();
})();

错误信息 #

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1128:20)
    at Module._compile (node:internal/modules/cjs/loader:1169:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
    at Module.load (node:internal/modules/cjs/loader:1068:32)
    at Module._load (node:internal/modules/cjs/loader:909:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12)
    at node:internal/main/run_main_module:23:47

解决方案 #

方法1：修改文件扩展名 #

将脚本文件的后缀从.js改为.mjs，Node.js会自动将其识别为ES模块，运行时执行node your-file.mjs即可。

方法2：配置package.json #

1. 若项目无package.json，先在项目根目录执行npm init -y生成；
2. 在package.json中添加"type": "module"字段：

{
  "type": "module"
}

此配置会让项目中所有.js文件默认以ES模块方式加载。

方法3：改用CommonJS语法 #

将代码中的ES模块导入语句替换为CommonJS的require：

const puppeteer = require('puppeteer');

无需修改任何配置，直接运行原.js文件即可。

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