1.IE에서_리액트_쓰기

IE 11에서 리액트 쓰기

문제 상황 !
기본적인 CRA로는 IE 11를 지원하지 못함

첫 번째 시도

react-app-polyfill을 install 후 import 시켜주고 node_modules에서 .cache를 지우고 package.json의 browsers list 에 "ie 11"을 추가했지만 ie11에서 The error you provided does not contain a stack trace. 라는 에러를 내며 동작하지 않음.

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

// package.json
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

두 번째 시도
- npm i fast-text-encoding후 import 시켜줬지만 같은 에러를 내며 동작하지 않음
1
import "fast-text-encoding/text";

세 번째 시도
- ./node_modules/react-dev-utils/webpackHotDevClient.js:60에 slashes: true를 추가했더니 성공!!
- 참고 :
  - https://velog.io/@ryu/react-scripts-3.3.0-WebSocket-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0
  - https://github.com/facebook/create-react-app/issues/8150

v3.3.0의 react-scripts 패키지 일 때

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: window.location.protocol === "https:" ? "wss" : "ws",
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: "/sockjs-node",
    slashes: true,
  })
);

2020.02.22 추가

세 번째 시도가 필요했던 이유:

https 프로토콜 사용 시에는 WebSockets over SSL/TLS (WSS) 프로토콜을 사용해야 하는데, create-react-app 하위 패키지인 react-scripts 패키지 v3.3.0 에서 http 와 https 모두 WebSockets (WS) 를 사용하도록 설정되어 있어서 생긴 이슈

react-scripts 패키지 v3.3.0 에서 webPackDevServer 설정이 SockJS에서 WebSocket으로 전환되었다. url.format이 ws://localhost이 아니라 ws:localhost처럼 URL을 리턴하기 때문에(no slashes) IE에서 Syntax Error를 던진다.

2020.02.14에 3.4.0 버전으로 업데이트 됨!

https://github.com/facebook/create-react-app/releases

1.IE에서_리액트_쓰기

IE 11에서 리액트 쓰기

hyerinOh