Next.js 빌드 결과물(청크 파일)의 원본 파일은 어떻게 찾는걸까?

 

이슈

프로젝트를 빌드하던 도중 사진과 같은 오류가 발생했어요.

 

escheck 에 설정한 버전이 es2020 인데

빌드 결과물은 es2020 을 초과하는 버전의 문법을 사용하고 있기 때문에

오류가 발생한거에요.

 

---

원본파일 찾기

nextjs 의 @next/bundle-analyzer 의 withBundleAnalyzer 를 사용중이여서

withBundleAnalyzer 를 사용할 수 있게 enabled 옵션을 true 로 변경해줘요.

 

그러면 빌드 결과물 안에 /analyze/client.html 파일이 생기는데

이걸로 확인해보면 돼요.

 

아마 별다른 설정을 하지 않았으면 자동으로 열릴거에요.

 

html 파일 내부에서 아까 오류가 발생했던 청크 파일명을 찾으면

짜잔~ 이렇게 어떤 파일 때문에 문제가 발생했는지 알려줘요!

 

저의 경우 react-day-picker 때문이네요.

 

그리고 아까 그 chunk 파일 열어서 오류난 지점 확인하면

어떤 것 때문인지 확실히 알 수 있어요.

 

let n=(h[e]||=new Intl.DateTimeFormat(..중략)

 

Logical OR assignment (||=) 라는 연산자 때문에 오류가 난 거였네요.

// 논리할당 연산자는  es2021 에 도입된 연산자

 

그럼 결론은 react-day-picker 라는 라이브러리가 제가 설정한 타깃보다 더 높은 버전의 문법을 사용해서 그렇다고 볼 수 있겠네요!