Source Map/devtools에서 소스 맵을 로드하지 못함

seyoung·2022년 5월 17일
0

프로젝트 업데이트 후 아래와 같은 문제가 생겼다.

DevTools에서 소스 맵을 로드하지 못함: url/assets/swiper/swiper.min.js.map의 콘텐츠를 파싱할 수 없음: Unexpected token < in JSON at position 0

swiper.min.js.map 파일을 찾을 수 없어서 생기는 경고인데
swiper 깃허브에서 해당파일을 다운받아 넣어주거나

//# sourceMappingURL=swiper.min.js.map

소스맵핑url을 제거해주면 된다.

이미 배포가 끝난 뒤고, swiper 라이브러리의 소스맵 파일이니 map파일을 추가하기보다는
그냥 지우는게 더 좋을거같다는 생각이 든다.

그런데 궁금해서 네이버를 들어가보니 여기도 소스맵 때문에 이와 같은 경고들이 뜨고 있었다. 프로그램이 동작하는데 문제는 없지만 그래도 보기가 좀 그렇군..

여기서 sourcemap 이란?

  • 빌드 전 후 파일을 맵핑시켜, 빌드된 상태에서 뜨는 오류를 빌드 전 어떤 파일, 어떤 위치에서 생긴건지 알려준다.

  • 웹팩으로 번들링하면 bundle.js 로 파일들이 합쳐지는데 이때 bundle.js에서 디버깅하는것은 비효율적이기 때문에 개발코드와 번들코드를 맵핑시켜주는 source map이 등장하게 됨.

  • scss -> css, js -> bundle.js, typescript -> javascript 이렇게 컴파일되는 경우에는 원활한 디버깅을 위해 sourcemap이 필요하다.

0개의 댓글