[Bug]: SyntaxError: The requested module 'puppeteer' does not provide an export named 'ElementHandle'

Bug description

Steps to reproduce the problem:

1. source code

app.ts

import { ElementHandle, Page } from 'puppeteer';

class CustomElement {
	print(): void {
		console.log(`${Page.name} ${ElementHandle.name}`);
	}
}

const elem = new CustomElement();
elem.print();

package.json

{
	"module": "./app.js",
	"types": "./app.d.ts",
	"type": "module",
	"dependencies": {
		"puppeteer": "^16.2.0",
		"ts-node": "^10.9.1",
		"typescript": "^4.7.4"
	}
}

tsconfig.json

{
	"compilerOptions": {
		"declaration": true,
		"declarationMap": true,
		"sourceMap": true,
		"moduleResolution": "node",
		"module": "ESNext",
		"target": "ESNext",
		"lib": [
			"ESNext",
			"DOM",
		],
		"allowSyntheticDefaultImports": true,
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"esModuleInterop": true,
	},
	"exclude": [ "node_modules" ],
}

1. run the program $(npm bin)/ts-node --esm app.ts or node --loader ts-node/esm app.ts

Puppeteer version

16.2.0

Node.js version

16.8.0

npm version

7.14.0

What operating system are you seeing the problem on?

macOS

Relevant log output

user@MacBook-Pro app % $(npm bin)/ts-node --esm app.ts

file://app.ts:1
import { ElementHandle, Page } from 'puppeteer';
         ^^^^^^^^^^^^^
SyntaxError: The requested module 'puppeteer' does not provide an export named 'ElementHandle'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:179:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)
    at async handleMainPromise (node:internal/modules/run_main:63:12)

[OrKoN]

I don’t think we export those classes. We only export types for them. You can implement duck-typing currently but not the instanceof checks, e.g.,

class CustomElement {
	verify(obj: puppeteer.Page|puppeteer.ElementHandle): boolean {
		if ('goto' in obj) { // likely a Page
		   return true;
                 }
                 if ('click' in obj) { // likely an ElementHandle
                    return true;
                 }
                 return false;
	}
}

[Qlub53]

Similarly,

import { ElementHandle, Page } from 'puppeteer';

class CustomElement {
	verify(obj: any): boolean {
		return obj instanceof Page || obj instanceof ElementHandle;
	}
}

const elem = new CustomElement();
elem.verify({});

leads to SyntaxError: The requested module 'puppeteer' does not provide an export named 'ElementHandle' and SyntaxError: The requested module 'puppeteer' does not provide an export named 'Page'

which may only be surppressed by either

		return obj instanceof puppeteer.Page || obj instanceof puppeteer.ElementHandle;

or

import puppeteer from 'puppeteer';
const { ElementHandle, Page } = puppeteer;

but will end up with a new error:

TypeError: Right-hand side of 'instanceof' is not an object