이안의 평일코딩

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

Front-end/React

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

이안92 2021. 5. 11. 11:47
반응형

 리액트 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로 실행해본다.

 

반응형
Comments