react-script 업데이트 IE11 동작하지 않는 문제

typescript 를 사용하면 dependencies 가 늘어나며 build 속도에 문제가 생겼다

그래서 모든 react packages와 관련 package를 최신 버전으로 업데이트 하여 중복되는 종속성을 제거하면서 개선 할 수 있었다.'

그런데 갑자기 IE에서 동작하지 않음

처음에는 단순히 기존에 index.js에 추가되어있는 import @babel/polyfill 이 제거되고 core-js로 통합되면서 발생한 문제인줄 알았다.

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

react-scripts에 포함되어있는 react-app-polyfill 을 추가하였는데도 마찬가지로 IE에서는 SCRIPT 에러가 발생하고 있었다.

https://medium.com/@matwankarmalay/create-react-app-ie11-script1002-syntax-error-how-to-get-rid-of-it-d70000c53ddf

위와 같은 에러가 계속해서 발생했고 위 포스팅을 참고하여 development 로 확인을 해보니 잘 동작하는것을 다시 확인했다.

하지만 production에서 동작하지 않음

당황스러웠다. https://stackoverflow.com/questions/59498274/react-app-is-not-working-in-ie-11-browser 해당 이슈를 확인해보니 react-scripts@3.2.0 상위 버전에서 IE 에서 동작하지 않는다는 이슈들을 보고 더 당황스러웠다. 많은사람들이 겪는 문제인걸까.

다시 package.json 확인

browserlist를 다시 확인해보자 위 안내에서 development 에만 ie 11이 포함되어있는데 production, development 공동 설정으로 변경하니 IE에서 잘 동작하는 것을 확인했다.

"browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "ie 11"
],

암튼 지금은 잘 되는 것 같다.