Zenn
🐙

PuppeteerをTypeScriptで書くときはtsconfigに気をつけたい、というお話

2021/02/06に公開
TypeScript
Puppeteer
tech

TypeScriptでPuppeteerを書くときにハマったことと解決策の記録。

先に結論
TypeScriptでPuppeteerを書くためには、まずtsconfigに以下設定が必要

tsconfig.json
 "compilerOptions": {
    "lib": ["DOM"],
    "esModuleInterop": true,
    ...
  }

環境

"puppeteer": "7.0.1"
"typescript": "4.0.3"

ハマった事象1

import部分でコケてTypeScriptがコンパイルできない。

import puppeteer from 'puppeteer';

この単純なimportを実行しようとすると、下記のエラー（一部）がでる。

node_modules/puppeteer/lib/cjs/puppeteer/common/DOMWorld.d.ts:72:65 - error TS2304: Cannot find name 'Element'.

Elementタイプが無いことが原因

これを解決するためには、libにDOMを追加する

tsconfig.json
"compilerOptions": {
    "lib": ["DOM"],
    ...
}

ハマった事象2

puppeteerがundefined

import puppeteer from 'puppeteer';
console.log(puppeteer);
// => undefined

これを解決するためには、esModuleInteropをtrueにする。

tsconfig.json
"compilerOptions": {
    "esModuleInterop": true
    ...
}

参考

Discussion