[React] 리액트 IE11 익스플로러 연동 크로스 브라우징 해결

 리액트 IE11 크로스 브라우징 문제 해결

 

Vue3로 신나게 개발을 완료하니 갑자기 익스플로러에서는 babel, polyfill을 이용해도 지원을 안해준다는 청천벽력같은 소리에 다시 React 고향으로 돌아왔다.

 

react-app-polyfill

먼저, 터미널에 react-app-polyfill을 설치한다. (개인적으로 yarn이 더 안정적이고 오류가 덜 떠서 추천)

yarn add react-app-polyfill
또는
npm install react-app-polyfill

 

package.json

development에 "ie 11"을 추가해준다.

 

index.js

react-app-polyfill/ie11과 /stable을 import해준다.

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
...

 

node_modules/.cache

마지막으로 node_modules/.cache 폴더를 삭제하고(존재한다면) 다시 npm start로 실행해본다.