Next.js에서 mediapipe를 사용하려다 만난 ESM / CJS 의 차이

 

리액트에서는 잘만 작동되던 mediapipe를 회사에서 진행중인 nextjs에 끌고와서 사용을 하려고 하다보니

'export' not defined 였나 하는 에러를 만나면서 ESM과 CJS의 차이점에 대해 알게되었다.

 

js가 돌아가는 node.js에는 CommonJS와 ECMAScript Modules 두 가지 모듈 시스템이 존재한다고 한다.

CJS는 require/module.exports를 하고 ESM은 import/export문을 사용한다. 

 

CJS는 '동기적'으로 작동하고, ESM은 비동기적으로 작동하는데

따라서 ESM에서는 CJS를 import할 수 있지만, CJS에서는 require을 할 수 없다고 한다

(이유 : CJS는 Top-level Await를 지원하지 않는 '동기적'이라서)

 

따라서 두 모듈 시스템은 서로 호환되기가 어렵다고 한다. 

 

[참고사이트]

CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field

 

 

Next.js는 기본적으로 CJS를 사용하는데, 내가 사용하려는 mediapipe는 ESM이었다.

 

Babel과 같은 도구를 사용하여 ES 모듈을 CJS 형식으로 변환하는 것이 가능하다고 하지만

 직접적으로 MediaPipe 소스 코드를 수정하여 CJS 형식으로 변환할 수도 있다고 하지만... 

이러한 변환은 공식적으로 지원되지 않으므로 주의가 필요하다고 하고 이럴거면 face traking을 처음부터 만들어야되는거 아니냐며

 

결론 : Next.js에서 mediapipe를 선택하기보단 next.js에 호환이 좋은 페이스 트레킹 라이브러리를 더 찾아보기로 선택!