[Antd] Failed to parse source map 오류 해결

리액트로 프로젝트를 만들면서

antd를 app.js 및 각 페이지별 js 파일 상단에 import 했더니

다음과 같은 오류가 계속 발생하였다

 

Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported

 

구글링해보니 antd가 새 버전의 리액트와 잘 맞지 않아서 종종 발생하는 오류인 것 같았다

스택오버플로우에 질문들이 남아있어서, 아래와 같은 해결책들을 참고할 수 있었다

(그런데 도움 되는 건.. 딱히 없었다 🥲)

 

하다하다 중국 블로그까지 번역해가면서 방법을 찾았는데 ㅋㅋ

의외로 간단하게 해결이 되어버렸다!

 

만약 같은 오류가 있다면 아래 세 가지 방법을 시도해본 후에

본인에게 맞는 것을 사용하면 될 것 같다 

 

방법 1)  import 'antd/dist/antd.min.css';  수정

 

해당 오류는 react-script가 5.0.0 버전으로 업그레이드됨에 따라 발생하는 문제라고 한다.

 

따라서 import 'antd/dist/antd.css'; 를

import 'antd/dist/antd.min.css'; 로 바꿔주면 된다고 하는데...

 

직접 작성해보니 오히려 antd의 스타일 깨짐 현상이 발생하는 역효과가 있었다

 

결과) 해결 ❌

 

 

방법 2) .env  추가

또 다른 방법으로는 .env 파일에 아래 코드를 복붙하는 게 있었다.

 

GENERATE_SOURCEMAP=false

다만 올해 4월에 5.0.1 버전이 배포되었고.. 그 전 사용자에게 해당하는 임시 방편이라고 하니

5.0.1 버전을 사용하는 나에게는 해당이 되지 않을 수 있다고 한다. (근본적인 해결방법 아님)

혹시 몰라서 추가해봤지만 역시나 해결 불가.

 

결과) 해결 ❌

 

 

방법 3) import문 css로 옮기기

index.css 파일에 @import '~antd/dist/antd.css'; 추가하기

 

이런저런 시도를 해보다 보니 가장 지지를 많이 받은 1번 해결책이

import문에 집중되어 있는듯하다.

 

뭔가 비슷하게 해결할 수 있을 것 같다. 뭔가 antd.css를 불러올 때 문제가 생기는 것 같은데.. 

이 녀석을 삭제해보니 (당연하게도) 에러가 사라져서 다른 곳으로 옮겨봤다

 

js 파일에 있던 import 'antd/dist/antd.css' 를 삭제하고

index.css에 @import '~antd/dist/antd.css'; 를 추가해보았다.

 

그랬더니 오류가 해결됨!

 

결과) 해결 ✅

 

주의:

이런저런 페이지에 작성된 import문을 전부 삭제하고 index.css에만 남겨둬야 한다.

하나라도 남아있다면 에러가 사라지지 않으니,

만약 이 방법을 사용했는데 해결이 안된다면 각 컴포넌트별 import문을 다시 확인하자. 

 

 

 

 

TIL 끝!