[Nextjs 14.2] ERR_REQUIRE_ESM 오류를 해결해보자

사건의 발단

일단.. 들어가기전에 .. 순전히 뇌피셜이고 내가 해결한 방법을 그냥 나열하고

문제에대한 추측을 쓴 글이다. 매우매우 틀릴 수도 있으니 틀린내용있다면.. 댓글로 부탁드립니다..

 

여하튼 

 

일기장... (이라고 쓰고 개발 연습용 블로그라 부른다) 버전을 업데이트 하다가

빌드에서 에러가 뜨는 상황이 발생했다

 

Error [ERR_REQUIRE_ESM]: require() of ES Module 'path' not supported.

아이고 머리야 ..

 

생전 처음 보는 에러라 머리가 굳어가는 도중 

 

많은 사람들이 이에 관한 issue를 겪는 것을 nextjs issue탭에서 발견

 

공통된 문제는 아래와같다

 

14.1에서 14.2 버전으로 올라오면서

ESM모듈 빌딩시에 박살이 났다(shiki, next-mdx-remote, 기타 esm 모듈들)

 

 

해결방법

 

https://github.com/hashicorp/next-mdx-remote

GitHub - hashicorp/next-mdx-remote: Load MDX content from anywhere

 

결국 찾은 방법은 아래의 2번방법, 다른 모든 ESM모듈들이 감염되어있는듯했다

 

주 범인은 아무래도 turbopack의 뻘짓으로 일어나는 상황인듯하다

 

여하튼, 해결 방법으로는 3가지가 제안되었다

 

1. dynamic + {ssr : false}를 통한 서버컴포넌트 취급시의 해당 컴포넌트를 cjs에서 못쓰게끔 변경

- 이게 왜일어나는지도, 정확히 원인과 이에대한 방법이 맞는지도 애매하다 (실제로 안된다는 사람이 있었다)

- 불과 0.1 버전 전에서는 잘 돌아가는데 ... app router의 업데이트 문제인걸까

 

2. transpilePackages 옵션을 통한 해당 esm모듈의 cjs 트랜스파일링

- 가장 많은 사람들이 채택했다. 다른 라이브러리 공식에서도 이 방법을 사용하라한다.

- 나도 일단 이 방법을 선택했다

 

3. experimental.optimizePackageImports 옵션에 해당 esm모듈들을 처리

- ?????? 처음부터 이해가 안갔다 

 

1번은 실패했고 (아마 이게 문제가 아닌것같다)

2번, 3번은 성공했다

 

2번이야 당연히 성공하는게 보장되어있고 (다른점이라면 두개의 파일 타입뿐이기에)

 

3번은 왜 이게 성공하는지 이해가 가지 않았다

 

최적화만 했는데 ESM문제가 해결된다니.. 그저 신기할따름이다.

 

결론

작년 현업으로 vue 한계치까지 쓰던 나는 매우 익숙한 상황이다(안이익에외않되?)

nextjs쓰면서.. 그들도 대응을 못하는 issue들이 많지만 vue보다는 좋다고 생각한다

(개인 평으로는vue는 사회의 악, 쓰레기)

 

사랑으로 nextjs를 사용해줍시다

 

next팀 화이티이잉