소개

vue-cli 4와 Electron에서 데스크탑 애플리케이션을 개발하려고 할 때 @types/node의 EventEmitter와 관련된 오류가 발생했습니다. 무사히 해결할 수 있었으므로 메모로 정리한다.

환경 및 버전

Vue: 2.6.11
Vue CLI: 4.4.6
@types/node:(14.0.14)→12.6.9(본 기사의 해결책)
Electron: 9.0.0

발생한 사건

"vue-cli3 + TypeScript + Electron으로 앱 개발" 을 참고로 (거의 명령이나 설정 그대로 설정) 프로젝트를 작성하면 마지막 애플리케이션 빌드 단계에서 다음과 같은 오류가 발생했다.

$ npm run electron:build
~~~省略~~~
ERROR  Failed to compile with 19 errors
~~~省略~~~
ERROR in C:(作業ディレクトリ)/node_modules/electron/electron.d.ts(1659,31):
1659:31 Cannot extend an interface 'NodeJS.EventEmitter'. Did you mean 'implements'?
    1657 |   }
    1658 | 
  > 1659 |   class BrowserWindow extends NodeJS.EventEmitter {
         |                               ^
    1660 | 
    1661 |     // Docs: http://electronjs.org/docs/api/browser-window
    1662 | 
~~~省略~~~

아무래도 interface는 계승할 수 없다고 화내고 있는 것 같다.

조사·해결

구그라고 보면 같은 내용의 에러에 관한 issue가 Github에 세워져 있었다.
electron.d.ts does not work with @types/node v13.1.0 · Issue #21612 · electron/electron · GitHub
아무래도 @types/node의 12계→13계의 버전 업시에, EventEmitter가 class로부터 interface로 변경된 것이 원인인 것 같다.

그래서 12계의 @types/node를 설치한다.

$ npm install -S @types/[email protected]

그리고 다시 빌드를 시도합니다.

$ npm run electron:build
~~~省略~~~
DONE  Build complete!

할 수 있었다! 빌드한 앱도 제대로 열린다.

비고

현시점에서 package-lock.json을 보면, Electron의 @types/node의 요구 버젼은 12.0.12가 되어 있으므로, 그 쪽의 버젼을 넣는 편이 안심일지도 모른다.