[Bug] Property 'use' does not exist on type

[Maxim-Mazurok]

Describe the bug

Started getting Property 'use' does not exist on type ... for puppeteer.use() after migrating to ESM.

Code Snippet

import puppeteer from "puppeteer-extra";
import StealthPlugin from "puppeteer-extra-plugin-stealth";
puppeteer.use(StealthPlugin());

Tsconfig:

{
  "exclude": [],
  "compilerOptions": {
    "module": "ESNext",
    "esModuleInterop": true,
    "lib": ["DOM", "ESNext"],
    "types": ["jest", "node"],
    "target": "ESNext",
    "moduleResolution": "Node16",
    "strict": false
  },
  "ts-node": {
    "files": true
  }
}

Versions

  "engines": {
    "node": "17.1.0",
    "npm": "8.1.3"
  },
  "dependencies": {
    "puppeteer-extra": "^3.3.4",
    "puppeteer-extra-plugin-stealth": "^2.11.1"
  },

npx ts-node -v
v10.8.2

  System:
    OS: Windows 10 10.0.19044
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 49.91 GB / 63.68 GB
  Binaries:
    Node: 17.1.0 - ~\AppData\Local\nvs\node\17.1.0\x64\node.EXE
    npm: 8.1.3 - ~\AppData\Local\nvs\node\17.1.0\x64\npm.CMD
  npmPackages:
    puppeteer-extra: ^3.3.4 => 3.3.4
    puppeteer-extra-plugin-stealth: ^2.11.1 => 2.11.1

Workaround:

import { default as puppeteer } from "puppeteer-extra";

(my first idea was to use esmoduleinterop:true but it didn't work)

[Maxim-Mazurok]

Not sure what I changed, but I was updating everything to the latest.

Now I have this:

"dependencies": {
  "puppeteer-extra": "^3.3.4",
  "puppeteer-extra-plugin-stealth": "^2.11.1"
},
"engines": {
  "node": "19.0.1",
  "npm": "8.19.2"
}

And the workaround no longer works.

Instead I used this workaround:

import vanillaPuppeteer from "puppeteer";
import { addExtra } from "puppeteer-extra"; // TODO: maybe change this after this issue is resolved: https://github.com/berstend/puppeteer-extra/issues/748
import StealthPlugin from "puppeteer-extra-plugin-stealth";
const puppeteer = addExtra(vanillaPuppeteer);
puppeteer.use(StealthPlugin());

[Maxim-Mazurok]

(typescript version 4.8.4)

[manniL]

Alternative:

import _puppeteer from 'puppeteer-extra'
const puppeteer = _puppeteer.default

[kibotrel]

Have the same problem, @manniL little hack worked but would be cool to fix it!

here is my tsconfig.json...

{
  "compilerOptions": {
    "newLine": "lf",
    "outDir": "dist",
    "baseUrl": ".",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "target": "esnext",
    "module": "esnext",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "lib": ["dom", "dom.iterable", "es2022"],
    "jsx": "preserve",
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "nodenext",
    "resolveJsonModule": true,
    "preserveValueImports": true,
    "isolatedModules": true,
    "composite": true,
    "incremental": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "allowUnreachableCode": false,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "pretty": true,
    "stripInternal": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

[rtritto]

This problem appears with puppeteer version > 15. Maybe this diff can help.

[hdodov]

I bumped in the same issue and found out that if I remove "type": "module" from my package.json, I no longer get the error.

[sean-hill]

I was having a similar issue, and almost got around it with the workaround:

import puppeteerCore from 'puppeteer-core'
import StealthPlugin from 'puppeteer-extra-plugin-stealth'
import { addExtra } from 'puppeteer-extra'

const puppeteer = addExtra(puppeteerCore)
puppeteer.use(StealthPlugin())

However after adding the stealth problem I get my core issue of require is not defined again:

          A plugin listed 'puppeteer-extra-plugin-stealth/evasions/chrome.app' as dependency,
          which is currently missing. Please install it:

          yarn add puppeteer-extra-plugin-stealth

          Note: You don't need to require the plugin yourself,
          unless you want to modify it's default settings.

[nuxt] [request error] [unhandled] [500] require is not defined
  at PuppeteerExtra.resolvePluginDependencies (./node_modules/puppeteer-extra/dist/index.esm.js:293:17)  
  at PuppeteerExtra.connect (./node_modules/puppeteer-extra/dist/index.esm.js:138:14)  

[andreww2012]

The problem is caused by missing export = defaultExport; in the declaration file. Until it is fixed, you can simply add this line manually and patch-package.

[brettsprads]

I'm still having a problem relating to this:

My code is here:

import playwright from "playwright"
import { addExtra } from "playwright-extra"
import stealth from "puppeteer-extra-plugin-stealth"
import dotenv from "dotenv"

dotenv.config({ path: ".env" })

export class Crawler {

    constructor(url) {

        // playwright
        this.browser = null
        this.context = null
        this.page = null
        this.url = url
        this.init()
    }

    async init() {

        const chromium = addExtra(playwright);
        chromium.use(stealth());

        const windowSize = "--window-size=1920,1080"

        if (process.env.HEADLESS == "false") {
            this.browser = await chromium.launch({
                headless: false,
                args: ["--start-maximized", windowSize]
            })
        } else {
            this.browser = await chromium.launch({ args: [windowSize] })
        }

        this.context = await this.browser.newContext()
        this.page = await this.context.newPage()

        // start playwright
        await this.page.goto(this.url)
        await this.page.waitForSelector("html")
        console.log("url visited")

        // teardown
        await this.context.close()
        await this.browser.close()
        console.log("teardown done")
    }
}

export const crawlUrl = async (url) => {
    const crawler = new Crawler(url)
    return await crawler.init()
}

[tmc-adept]

I have encountered a similar issue. It seems that puppeteer-extra's default export isn't setup for modern ESM.