I am running into an issue with Puppeteer where ‘this’ is undefined within the Puppeteer class instance methods when Puppeteer is imported into a module.
When I import Puppeteer directly in my main script, everything works as expected. However, as soon as I try to import and use Puppeteer within a separate module, I get the following error:
TypeError: Cannot read properties of undefined (reading '#defaultContext')
at newPage (/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/Browser.js:173:27)
Upon closer inspection, it appears that this
is undefined inside of the browser.newPage()
instance method whenever Puppeteer is imported within a module.
I have tried tweaking the allowSyntheticDefaultImports
, esModuleInterop
, module
and moduleResolution
compiler options in my tsconfig.json
to no avail. I also tried importing Puppeteer using the import puppeteer from "puppeteer"
, import * as puppeteer from "puppeteer"
, and import puppeteer = require("puppeteer")
syntaxes and am running into the same problem in all three situations.
While manually binding this
when invoking the instance method appears to be a workaround (e.g., browser.newPage.bind(browser)
), you seemingly have to do so every time you call any instance methods of Puppeteer’s classes.