React JS Old Browser "undefined" Errors

이슈

npx create-react-app

를 사용해서 만든 앱으로 old Browser를 지원 하기 위해서 browser list버전을 아무리 내려 보아도

Uncaught TypeError: undefined is not a function

에러가 발생하는 현상이 나타났다.

한참 후에 알았는데 발생 사유는 Object.assign이 undefined 되어 있기 때문이다.

 

여기서 다루지 않는것

package.json에 있는 browserslist를 통해서 old browser를 설정하는 내용은 다루지 않는다.

해당 설정을 했음에도 undefined에러나 나는 경우를 여기에서 다룬다.

해결 방법

"react-scripts"의 버전을 의심해 보아야 한다.

https://github.com/facebook/create-react-app/tree/main/packages/react-scripts

react-scripts는 create-react-app을 통해서 만들어진 프로젝트를

webpack과 babel을 통해서 resource 번들링 및 Browser Compatibility를 처리해주는 모듈이다.

react-scripts의 1.1.5와 2.0.0의 차이를 보면 polyfills.js가 2.0.0 이후로 더이상 사용 되지 않는 것을 확인 할 수 있다.

이 차이로 인해서 특정 old browser에서는 오류가 나는 것으로 짐작된다.

기존 5.0.1의 최신 버전을 1.1.5로 변경 후 테스트를 해보면 기존 old browser에서 정상적으로 작동하는 것을 확인할 수 있다.

 

좀더 좋은 방법

만약에 Object.assign이 문제라는게 확실 하다면 아래와 같이 처리해 줄 수 있다.

'object-assign' package를 추가 해준다.

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "object-assign": "4.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
      "chrome 39"
    ]
  
}

Package 추가 후 

js파일 하나를 만들어서 index.js 가장 앞에 import 해준다.

주의할 것

버전을 다운 그레이드 할 경우 오류가 날 수 있는데 다음 순서로 재 설치 해주면 된다.

1. node_moduls 폴더를 모두 삭제
2. package-lock.json 파일 삭제
3. npm install

 

혹시나

아주 혹시나 해서 polyfill을 적용하고 react-scripts를 최신 버전으로 변경해 봤지만 오류는 동일했다.

페이스북은 어떻게 지원하는지 알아보려고 했는데, 지원되지 않는 브라우저로 손절 했다.

old browser는 이제 그만 했으면 좋겠는데, 안될듯 ㅎㅎㅎ