[오류해결] Remix V1 설치 후 실행 시 ERR_REQUIRE_ESM 오류 발생

오류 발생

npx create-remix@1 Remix 프로젝트를 생성하고 실행하려는데 오류가 발생했다.
생성 시 선택한 옵션은 아래와 같다. 서버로 Remix App Server를 언어는 JavaScript를 선택했다.

 iksflow@Sungs-MacBook-Pro  ~/studyroom  npx create-remix@1
? Where would you like to create your app? remix-app
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's
easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

 

오류 상세

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/iksflow/studyroom/remix-app/build/index.js from /Users/iksflow/studyroom/remix-app/node_modules/@remix-run/serve/dist/index.js not supported.
/Users/iksflow/studyroom/remix-app/build/index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename /Users/iksflow/studyroom/remix-app/build/index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/iksflow/studyroom/remix-app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at /Users/iksflow/studyroom/remix-app/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/iksflow/studyroom/remix-app/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/iksflow/studyroom/remix-app/node_modules/express/lib/router/route.js:144:13)
    at next (/Users/iksflow/studyroom/remix-app/node_modules/express/lib/router/route.js:140:7)
    at next (/Users/iksflow/studyroom/remix-app/node_modules/express/lib/router/route.js:140:7)

 

원인 분석

Remix V1에서는 Node 의존성을 commonjs 방식으로 설치했는데 Remix V2로 넘어가면서는 ESM 방식으로 변경되었다.
오류는 신기하게도 Remix V1을 설치했는데 ESM방식으로 모듈을 불러오고 있다.
Remix 개발팀에서 V2를 출시한 이후로 옛날 버전인 V1 관련한 의존성 설치에 문제가 생긴 것으로 보인다.
프로젝트 생성 시 package.json 정보를 잘못 구성하는 것 같다.

 

해결 방법

처음에는 remix.config.js의 옵션을 수정해보려 했지만 정상적으로 동작하지 않았다.
원인을 추적해서 해결하기는 어려웠지만 Remix Github Issue에서 실마리를 찾았다.
컨트리뷰터가 제시한 대안으로는 템플릿을 명확하게 특정해서 설치하는 방법을 권했다.
npx create-remix@1 명령어에 --template 옵션으로 템플릿 경로를 지정하면 정상적으로 설치할 수 있다.
Remix App Server 템플릿으로 설치하려면 아래 명령어를 실행한다.

npx create-remix@1 --template https://github.com/remix-run/remix/tree/remix@1.19.3/templates/remix

다른 템플릿을 사용하고 싶으면 https://github.com/remix-run/remix/tree/remix@1.19.3/templates 링크에서 제공하는 템플릿을 확인할 수 있다.
그런 다음 사용하려는 템플릿의 이름으로 명령어를 수정하면 된다.
예를 들어 Remix App Server 대신 express 템플릿을 사용하려면 아래와 같이 입력하면 된다.

npx create-remix@1 --template https://github.com/remix-run/remix/tree/remix@1.19.3/templates/express

참고자료

• github contributor 답변: https://github.com/remix-run/remix/issues/7557#issuecomment-1743212116
• Remix 1.19.3 옵션 정보: https://remix.run/docs/en/1.19.3/pages/v2#servermoduleformat