Electron 5 업데이트 이후 window.require is not a function 오류 발생 시 해결 방법
4월 25일, Electron 5.0.0 업데이트가 있었습니다. 최신 버전의 출시는 항상 좋은 일이지만, 메이저 버전 업데이트의 경우 많은 오류를 동반하는 경우가 많습니다. 특히 deprecated 예정 API를 사용하는 경우 해당 오류를 피할 수 없는 경우가 많습니다. 저 또한 개발 중이던 프로젝트의 Electron 버전을 5로 업데이트하자 첫 페이지부터 오류가 저를 반겼습니다.
처음에는 window.require is not a function 오류를 구글에 검색해서 해결 방법을 찾아보려 했습니다. 제 개발 환경이 CRA와 Electron인 만큼 react를 붙여 검색해보기도 했는데, 방법을 찾기는 힘들었습니다. 그래서 electron 5를 붙여 검색해보니 한 문서를 찾을 수 있었습니다.
많은 라이브러리에서는 메이저 업데이트 전, 큰 변경사항을 미리 문서로 고지하고 있고, Electron 역시 동일합니다. 많은 오류를 구글링과 stackoverflow를 통해 해결할 수 있다 보니 가장 중요한 사실을 잊었었습니다.
제가 봤을 때 이번 오류의 원인으로 보이는 부분은 이 부분이었습니다. 원래는 BrowserWindow를 생성할 때, webPreferences의 nodeIntegration의 값을 별도로 부여해주지 않아도 기본 값이 true이기 때문에, 정상적으로 window.require API를 이용할 수 있었지만, 5 버전 부터는 기본 값으로 false가 들어가기 때문에 사용할 수 없는 것으로 보였고, 바로 코드를 수정했습니다. 그래서 코드를 수정했습니다.
// 수정 전 코드
win = new BrowserWindow({ width: 1080, height: 1920, kiosk: true, 'fullscreen': true, 'frame': false });
// 수정 후 코드
win = new BrowserWindow({ width: 1080, height: 1920, kiosk: true, 'fullscreen': true, 'frame': false, webPreferences: { nodeIntegration: true } });
코드를 수정하고 나니 문제없이 작동하는 것을 볼 수 있습니다. 역시 공식 문서를 잘 읽어봐야겠네요.
짧게 정리하자면, BrowserWindow의 webPreferences의 nodeIntegration을 true로 주시면 해결되는 문제입니다.