프로젝트에 일렉트론을 추가하는 세팅을 하면서
여러 관련 패키지들을 설치했다.
그리고 electron 파일을 작성할 때, 다음과 같이 모듈을 require로 불러왔다.
const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');
...
function createWindow() {
mainWindow = new BrowserWindow({
...
webPreferences: {
devTools: isDev
},
});
...
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
...🚨ERR_REQUIRE_ESM ???
세팅을 마치고 일렉트론을 실행하니 아래와 같은 오류가 떴다.
Uncaught Exception: Error [ERR_REQUIRE_ESM]: requrire() of ES Module
오류 내용을 보니 확실히 electron-is-dev 패키지의 문제인 것 같았다.
여기저기 삽질하다가 해당 패키지의 GitHub 이슈를 확인하니 같은 문제를 겪고 있는 사람이 있었고,
패키지가 v3.0.0으로 업그레이드되면서 ES 모듈 형식을 요구한다는 답변을 확인했다.
ES 모듈로 작성되었기 때문에, CommonJS 문법의 require로 불러오면 오류가 발생하는 것이다.
WebStorm의 자동 import 기능도 require를 사용해서 모듈을 불러왔고, 관련 블로그 글들도 require을 사용했어서 이 점을 간과했다.
이유를 알았으니 오류를 해결하기 위해 여러 방법을 시도해 보았다.
해결 방법
1. ES 모듈로 전환
먼저, 프로젝트를 ES 모듈로 전환하는 방법을 시도했다.
이를 위해 package.json 파일에 "type": "module"을 추가했다.
프로젝트를 ES 모듈로 전환 후 import로 해당 모듈을 불러올 수 있다.
import isDev from 'electron-is-dev';하지만 이 경우는, 기존에 CommonJS 모듈 형식으로 작성된 코드를 전부 변경해 주어야 한다.
또한 일부 패키지는 아직 ES 모듈을 완전히 지원하지 않기 때문에 프로젝트에 사용되는 패키지가 모두 ES 모듈을 지원하는지 확인해 봐야 한다.
그 외에도 따로 설정해 줘야 하는 것들이 너무 많았다. 핵 번거로움!
이 방법은 넘기고 다른 방법을 찾았다.
2. 동적 import 사용
동적 import를 활용하여 ES 모듈을 CommonJS 환경에서 불러오는 방법이 있다.
import 함수는 ES 모듈을 비동기적으로 로드하는 데 사용된다.
이를 await 키워드로 대기시키면, 해당 모듈이 로드되기를 기다린 후에 다음 코드를 실행할 수 있다.
async function createWindow() {
const isDev = await import('electron-is-dev').then(mod => mod.default);
mainWindow = new BrowserWindow({
...
});이 방법은 코드를 좀 더 명확하게 작성할 수 있고, 해당 패키지가 ES 모듈을 지원하는지 여부를 고려하지 않고 사용할 수 있다.
또한 오류 내용에서도 dynamic import() 사용을 알려주고 있다.
3. 버전 다운그레이드
그래서 나는 동적 import 방법을 사용했느냐?
아뇨 🤪ㅎ
동적 import를 사용해서 모듈을 불러오는 것도 간편하고 좋았지만,
같은 파일 내에 다른 모듈은 모두 require로 불러오고 있었는데, 해당 모듈만 다른 방법으로 불러오는 것이 심히 거슬렸다.
결국 코드의 일관성을 유지하기 위해 electron-is-dev 패키지를 v2.0.0 으로 다운그레이드하여,
해당 패키지도 require로 불러오는 방법을 선택했다.
npm uninstall electron-is-dev
npm i electron-is-dev@v2물론 버전 다운그레이드는 일시적으로는 문제를 해결할 수 있지만,
장기적으로는 해당 패키지의 새로운 기능이나 버그 수정 사항을 이용하지 못할 수 있기 때문에 주의해야 한다!
나의 경우 electron-is-dev 패키지는 올해 1월에 3년만에 v3.0.0으로 업그레이드 된 것이라
아직은 최신 버전을 사용할 필요가 없다고 느껴 다운그레이드를 선택했다.
결론
프로젝트를 시작하기 전에 사용할 패키지들을 정리하고,
각 패키지나 모듈이 어떤 방식을 지원하는지 확인하는 것이 중요하다는 것을 깨달았다.
또한 블로그 글이나 문서를 참고할 때 어떤 버전을 사용했는지, 언제 쓴 글인지 잘 확인해야겠다^^;;
리액트 쿼리 때 호되게 당해놓고 또 삽질했네!!
