require() of ES Module someFile.js from someFile2.js not supported 이슈 해결

에러

Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/packageA/node_modules/packageB/dist/index.cjs.js from /app/node_modules/packageA/dist/cjs/hooks.js not supported.
index.cjs.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 index.cjs.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 /app/node_modules/packageA/node_modules/packageB/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

 

상황

packageA의 hooks.js 파일에서 packageB를 import 해서 사용하고 있고, 이 에러는 별도 저장소에서 packageA 를 import 해서 사용할 때 발생하였습니다. 에러를 해석해보면 "packageA 내부의 node_modules에 있는 packageB 파일 중 index.cjs.js 는 ES Module 이라 require 문을 사용할 수 없다"고 한다.

 

문제 파악 / 해결법

우선 .cjs.js 파일이면 common js 인데 왜 이 파일을 ES Module 파일이라고 하는걸까?

바로 packageB가 type: module 로 정의되어 있기 때문이다. type: module 을 package.json 에 정의하면 해당 패키지의 모든 .js 파일은 esm 으로 처리되는데, cjs 로 빌드된 파일이기 때문에 require 문법이 파일 안에 들어있고 에러가 발생하는 것이다.

 

해결하기 위해서 node에서 제공한 방법은 (위의 에러문의 2, 3번째 줄) packageB 를 빌드할 때 .cjs.js 가 아닌 .cjs 확장자로 빌드 파일을 저장하라고 한다(esm 은 .mjs로). 이렇게 하게 되면 default export 와 named export 가 혼동되어 es module interupt 에러가 발생하는 경우가 있다. 

 

두번째로는 type: module 을 제거하여 더이상 .js 파일들을 esm 으로 인식하지 않게 만드는 방식을 사용할 수 있다. 우선 첫번째 방식을 시도해보고 이슈가 생기면 두번째 방식으로 해결하자.