TypeScript로 Pupeer를 쓸 때 tsconfig에 주의해야 한다는 이야기

TypeScript로 Puppeeteer에 빠졌던 일과 해결책을 적은 기록.
선결
TypeScript로 Puppeeteer를 쓰기 위해서는 먼저 tsconfig에서 다음과 같은 설정이 필요합니다
tsconfig.json

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

컨디션

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

푹 빠지다

import 섹션에서 Type Script를 컴파일할 수 없습니다.

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"],
    ...
}

푹 빠지다

puppeterundefined

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

이 문제를 해결하기 위해esModuleInterop을 진짜로 설정합니다.
tsconfig.json

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

참고 자료

tsconfig.json의 모든 옵션을 이해합니다(추가 중) #lib

esModuleInterop 옵션의 필요성 정보