[React] CRA 프로젝트에서 IE 지원하기

차유림·2021년 8월 19일

Create-react-app 프로젝트를 진행하는데
IE브라우저를 지원해야한다면 필요한 것들을 정리합니다.

IE 지원 시 필요한 설정

CRA 공식문서를 보면, IE 9, 10, 11을 지원하기 위해서 react-app-polyfill을 사용하라고 안내하고 있습니다.
CRA - Supported Browsers and Features

polyfill 설정

react-app-polyfill repo
react-app-polyfill 패키지를 설치합니다.
필요에 따라 ie9, ie11, stable 모듈을 import 합니다.

  // These must be the first lines in src/index.js
  import 'react-app-polyfill/ie9'; 
  import 'react-app-polyfill/ie11';
  import 'react-app-polyfill/stable';

`SCRIPT 1003` 에러 해결

react-app-polyfill 을 설정해줘도 IE에서 실행했을 때 에러가 발생했습니다.
여러 삽질 끝에..! babel-loader 이슈로 node_modules 에 있는 .cache 폴더를 삭제 후 다시 구동하면 해결됨을 알았습니다.🥳
(CRA 공식문서 Supported Browsers and Features의 마지막에도 언급되어 있었습니다..!
When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.)
medium - Create React App IE11 : SCRIPT1002: Syntax Error How to get rid of it.

🚧 삽질 기록

삽질1. core-js 와 regenerator-runtime 설정으로는 해결되지 않았습니다.
리엑트 프로젝트(CRA) IE11에서 실행하기
삽질2. react를 import 하지 않아도 jsx사용할 수 있도록 변경된 것이 원인일 것이라 생각했지만 아닌 듯합니다. 글에서는 index.js 상단에 /** <strong i="5">@jsxRuntime</strong> classic */ 을 추가하거나 환경변수로 DISABLE_NEW_JSX_TRANSFORM=true 을 설정하는 방법을 추천했지만 해결되지 않았습니다.
react-scripts v4.0.0 IE11 작동안함
삽질3. react-scripts 버전이 3.3.0 이상일 경우 문제가 생기는 것 같다는 내용을 확인하여, react-scripts@3.2.0 로 다운그레이드 했습니다. 이 방법으로 해결 가능했지만, React를 필수로 import 해야하는 번거로움이 생깁니다.
“react-app-polyfill” doesn't work in IE11

browserslist 옵션 설정한 브라우저 목록 확인하는 방법

package.json 파일에서 개발, 배포 환경에서 browserslist 옵션을 통해 어느 브라우저까지 지원할지 설정할 수 있습니다.

"browserslist": {
    "production": [
      "defaults",
      "not dead",
      "> 1% in KR",
      "ie 9-10"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 9-10"
    ]
  },