[React] Toast-UI 에디터 관련 에러: Failed to parse source map

# toast-ui editor 사용 관련 에러 해결 방법: Failed to parse source map

 

[ 문제 상황 ] 

리액트 환경에서 @toast-ui/react-editor 를 설치 후,

Editor 컴포넌트를 사용하면, 별다른 문제가 보이진 않는데...(아직?)

 

아래와 같은 에러코드가 떠서 개발자의 마음을 심히 불편하게 하는 경우가 있다.

 

 

[ 에러 코드 ]

WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/node_modules/@toast-ui/editor/dist/purify.js.map' file:

Error: ENOENT: no such file or directory, open '/node_modules/@toast-ui/editor/dist/purify.js.map'

 

 

[ 문제 원인 ]

이와 관련해 TOAST-UI Editor 공식 깃허브에 이슈가 등록되어 있으니 참고하자.

https://github.com/nhn/tui.editor/issues/2137

 

라이브러리 내부적인 사정이라, 자세한 상황파악은 어렵지만

에러코드에서 말해주는 것처럼 소스맵(Source Map)과 관련된 이슈로 보인다.

 

소스맵은 무엇인가?

 

리액트는 웹팩을 통해 파일들을 압축하여 배포함으로써 성능을 최적화 한다.

이 때, 내부적으로 소스맵(Source Map)이란걸 만들어, 압축한 파일과 실제 원본 파일을 매핑하여 디버깅이 가능하도록 한다.

 

아무튼 이 부분에서 뭔가 이슈가 있는 것 같고,

소스맵을 사용할 경우 오히려 보안에 취약할 수 있다는 의견도 많다.

 

 

[ 해결 방법 ] 

=> 리액드 구동 시, Source Map 을 사용하지 않도록 GENERATE_SOURCEMAP=false 설정을 해주면 에러가 사라진다.

// package.json 파일

"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    ...
}, ...

---

뭔가 속 시원하진 않지만,

일단 지금까지 알아 본 내용을 기록 차원에서 남겨 둔다.