Puppeteer typings assume global DOM lib types

[JoshuaKGoldberg]

• I tried using the @types/xxxx package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @marvinhagemeister @cdeutsch @jwbay

Using Puppeteer in a Node project without the dom type NodeListOf gives type errors. @types/puppeteer should provide an empty interface NodeListOf { } shim for compilation runs that don't include the different "lib" set. It should also compile without the dom lib types.

../../node_modules/@types/puppeteer/index.d.ts:754:30 - error TS2304: Cannot find name 'NodeListOf'.

754     pageFunction: (elements: NodeListOf<Element>, ...args: any[]) => any,
                                 ~~~~~~~~~~

Edit: double-checked; it's just Element, Node, and NodeListOf.

[tarunjangra]

I think, i am struggling with similar problem. did you get any solution?

../../../node_modules/@types/puppeteer/index.d.ts(740,29): error TS2304: Cannot find name 'Element'.

740     pageFunction: (element: Element, ...args: any[]) => any,
                                ~~~~~~~


../../../node_modules/@types/puppeteer/index.d.ts(754,30): error TS2304: Cannot find name 'NodeListOf'.

754     pageFunction: (elements: NodeListOf<Element>, ...args: any[]) => any,
                                 ~~~~~~~~~~


../../../node_modules/@types/puppeteer/index.d.ts(754,41): error TS2304: Cannot find name 'Element'.

754     pageFunction: (elements: NodeListOf<Element>, ...args: any[]) => any,

[JoshuaKGoldberg]

For now, make stub interfaces for those interfaces in your own files:

// See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24419

interface Element { }
interface Node { }
interface NodeListOf<TNode = Node> { }

[cdeutsch]

Is there a reason you don't just bring in the "dom" types in your tsconfig file?

Puppeteer loads up a web browser, so I think it makes sense to use the "dom" types, even in Node. (assuming it doesn't cause other issues)

[tarunjangra]

Yeah, as you said there is no harm to define "dom" types in tsconfig.
Thanks.

[JoshuaKGoldberg]

There is harm in defining the "dom" types in the tsconfig. Although Puppeteer loads up a web browser, the Node process launching it doesn't have access to the global browser-specific variables such as name and performance. See microsoft/TypeScript-DOM-lib-generator#327

Even for apps that run in the context of the browser, it's not unreasonable to intentionally exclude "dom" and to let UI-specific libraries (Angular, React, Vue, etc.) deal with browser specifics.

[richard-joseph-dunelm]

Until this is resolved, skipLibCheck could also be used (tsconfig, package.json). See:

firebase/firebase-tools#749 (comment)

[HopperGithub]

Is there any progress to resolve this error?
node_modules/@types/puppeteer/index.d.ts(182,30): error TS2304: cannot find name 'Element'

put "skipLibCheck": true in tsconfig.json or use tsc --skipLibCheck also handling this for me

[NikhilVerma]

It would be useful if Typescript (along with existing lib) also exported interfaces. So you could do something like

import { Window } from 'typescript/lib/lib.dom.namespaced';

page.evaluate(() => {
    (window as Window).alert('something');
});

[heroneto]

Hi people, i'm facing the same problem with types definition, and Element is not exported from any Lib.

To get apropriate intelisense with el methods, i changed my code with below example:

From:

...  
await page.waitForTimeout(3000)
await page.waitForSelector('button[type=submit]') 
await page.$eval('button[type=submit]', el => el.click())
await page.waitForNavigation({waitUntil: "load"})
await page.goto(url)
...

To this:

...  
await page.waitForTimeout(3000) 
await page.waitForSelector('button[type=submit]')
await page.$('button[type=submit]').then(el => {
  el.click()
})
await page.waitForNavigation({waitUntil: "load"})
await page.goto(url)
...

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.

[tannerlyons]

If anyone finds this issue in the future and wants an easy solution, you can use a triple-slash directive in the file you write your puppeteer code in.

It's not perfect, but it allows you to say "I'm writing node code but for JUST this file tell the compiler to assume the DOM is also available". as @JoshuaKGoldberg noted, this is dangerous. It would be reasonable to make sure the puppeteer code is isolated in its own file.

/// <reference lib="DOM" />

import puppeteer from "puppeteer";

// Do your puppeteer stuff.
export const runMyPuppeteerCode = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(url);

  const someElement: Element = await page.evaluate(() => {
    const aButton = document.querySelectorAll(".my-button");
     ...