[오류 해결] Source Map/devtools에서 소스 맵을 로드하지 못함

코드 작성 중 많은 다음과 같은 오류가 생겨 소중한 1시간여 정도를 날린 적이 있다....

다시 반복하지 않기 위해 이 글을 작성한다.

 

아래는 당시 발생했던 Error

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

 

swiper.min.js.map 파일을 찾을 수 없어서 생기는 경고인데 파일을 다시 다운 받고 새 파일을 만들어도 해결하지 못했었다....

무엇이 문제인가??

 

해결법은

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

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

 

 

sourcemap 이란?

• 빌드 전 후 파일을 맵핑시켜, 빌드된 상태에서 뜨는 오류를 빌드 전 어떤 파일, 어떤 위치에서 생긴건지 알려준다.
• 웹팩으로 번들링하면 bundle.js 로 파일들이 합쳐지는데 이때 bundle.js에서 디버깅하는것은 비효율적이기 때문에 개발코드와 번들코드를 맵핑시켜주는 source map이 등장하게 됨.

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