模块中导入Puppeteer时实例方法内'this'未定义的问题排查

问题场景 #

在单独模块中导入Puppeteer后，调用browser.newPage()时触发以下错误：

TypeError: Cannot read properties of undefined (reading '#defaultContext')
    at newPage (/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/Browser.js:173:27)

排查确认是方法内部的this指向丢失导致，但主脚本直接导入使用时无此问题。手动通过browser.newPage.bind(browser)()的方式可临时解决，但每次调用都需要绑定，操作繁琐。

解决方案 #

1. 规范导入语法与TS编译配置 #

确保使用正确的默认导入语法，同时调整TypeScript编译配置避免模块包装问题：

• 导入语法：

  import puppeteer from 'puppeteer';
  

• tsconfig.json关键配置：

  {
    "compilerOptions": {
      "module": "ESNext",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  

  该配置确保ES模块与CommonJS模块的互操作性，避免导入时破坏Puppeteer实例的方法上下文绑定。

2. 封装工具函数统一绑定上下文 #

创建一个工具函数，在生成Puppeteer实例时自动绑定常用方法的上下文，避免重复手动操作：

// puppeteer-utils.ts
import puppeteer from 'puppeteer';

export async function createBrowser() {
  const browser = await puppeteer.launch();
  
  // 为需要调用的方法绑定上下文
  browser.newPage = browser.newPage.bind(browser);
  browser.close = browser.close.bind(browser);
  browser.pages = browser.pages.bind(browser);
  
  return browser;
}

使用时直接调用该函数获取实例：

// 业务模块
import { createBrowser } from './puppeteer-utils';

const browser = await createBrowser();
const page = await browser.newPage(); // 无需手动绑定即可正常调用

3. 避免错误的模块导出方式 #

如果是自定义的Puppeteer工具模块，不要直接导出实例方法的引用（会丢失this上下文）：

• ❌ 错误示例：

  export const newPage = browser.newPage;
  

• ✅ 正确方式：导出整个实例或返回实例的函数：

  export async function getBrowserInstance() {
    return await puppeteer.launch();
  }
  

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