Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules)

Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules) The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code. The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file. In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.

 

평화롭게(?) 프로젝트를 하고 있던 중 위와 같은 에러가 발생했다.

해당 코드를 건드리지도 않았는데 갑자기 react-intersection-observer 라이브러리를 사용하고 있던 컴포넌트들에서 모두 에러가 발생했다.

 

처음에는 내 프로젝트 내의 package.json 파일들을 확인했는데, "type":"module"밖에 없어서 헤매다가 검색하던 도중 다음의 글을 통해 힌트를 얻었다.

 

https://github.com/pmndrs/jotai/discussions/2579

Next 14: Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules) · pmndrs

 

 

nextjs 버전을 업데이트하면서 터보팩의 웹팩이 대체되면서 맞지 않는 문제가 있는 거 같았다.

먼저 오류가 발생한 라이브러리 패키지의 위치로 이동해,

제시된 해결책처럼 node_modules의 react-intersection-observer 패키지에 "type":"commonjs"를 찾았다!

pnpm을 패키지 매니저로 사용하기 때문에 다음과 같이 명령어를 입력해 줬더니

pnpm patch-commit '***내 프로젝트 경로***/tripie/node_modules/.pnpm_patches/react-intersection-observer@9.13.1'

https://pnpm.io/cli/patch

pnpm patch <pkg> | pnpm

에러가 해결되었다!