[Error] Next.js14.0.3에서 three/drei 라이브러리 에러

💣Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator') 에러

• 환경: Window
• IDE: Vscode
• 프레임워크 버전: Next.js14.0.3
• 오류 난 라이브러리 이름/버전: @react-three/drei: 9.75.0

최근 업데이트한 Next.js 14.0.3에서 three/drei를 import하여 사용만 해도 위와 같은 에러 메세지가 나옴.

dev모드인 경우 log에 계속 에러가 나오고 있는 상황이며,  createSDFGenerator를 사용하지 않는 컴포넌트는 동작함.

 

vercel에 테스트 배포를 실험해 본 결과, 아래 사진과 같이 error를 잡고 있지만 배포는 가능. dev와 마찬가지로 createSDFGenerator를 사용하지 않는 컴포넌트 배포 환경에서도 동작 가능한 것을 확인함.

three/drei next.js14 vercel 배포 에러

 

 

✨해결 방법

당장에 할 수 있는 방법은 next.js의 다운그레이드를 선택하는 방법밖에 없다. 14버전의 server action과 같이 사용하고 싶다면 14.0.0버전을 사용하면 될거 같다.