[리엑트 오류]white-web-sdk오류 Cannot set properties of undefined (setting 'type')

yarn list mathjs

리엑트를 전부 설치하고 환경을 맞춘뒤 프로젝트를 실행하였더니 아래와 같은 오류가 발생하였다.

Uncaught runtime errors: × ERROR Cannot set properties of undefined (setting 'type') 
TypeError: Cannot set properties of undefined (setting 'type') at __webpack_modules__../
node_modules/mathjs/lib/cjs/type/fraction/Fraction.js.createFractionClass.isClass 
(http://localhost:3000/static/js/bundle.js:464236:39) at assertAndCreate 
(http://localhost:3000/static/js/bundle.js:476953:12) at 
./node_modules/mathjs/lib/cjs/entry/pureFunctionsAny.generated.js 
(http://localhost:3000/static/js/bundle.js:415065:69) at options.factory 
(http://localhost:3000/static/js/bundle.js:1434706:31) at __webpack_require__ 
(http://localhost:3000/static/js/bundle.js:1434094:32) at fn 
(http://localhost:3000/static/js/bundle.js:1434365:21) at 
./node_modules/mathjs/lib/cjs/entry/mainAny.js 
(http://localhost:3000/static/js/bundle.js:414901:34) 
at options.factory (http://localhost:3000/static/js/bundle.js:1434706:31) 
at __webpack_require__ (http://localhost:3000/static/js/bundle.js:1434094:32) 
at fn (http://localhost:3000/static/js/bundle.js:1434365:21)

https://github.com/josdejong/mathjs/issues/3022

Error on Fraction.js dependency · Issue #3022 · josdejong/mathjs

해당 이슈에서 비슷한 오류를 찾게되어 아래와 같이 해결해보았다.

mathjs의 Fraction.js에서 Cannot set properties of undefined (setting 'type') 오류 해결 방법

현재 Fraction.js에서 type 속성을 설정하는 과정에서 undefined 오류가 발생하고 있습니다.
이 문제는 mathjs와 그 의존성(fraction.js)의 버전 충돌로 인해 발생할 가능성이 높습니다

• fraction.js의 최신 버전(4.3.1 이상)에서 mathjs와의 호환성 문제 발생
  • mathjs가 fraction.js의 특정 API를 사용하는 방식이 변경되었거나 깨졌을 가능성이 큼.
  • fraction.js@4.3.1 이후 업데이트에서 구조가 변경되면서 mathjs 내부적으로 오류 발생.
• 의존성 충돌 문제
  • 프로젝트 내에 여러 버전의 mathjs 또는 fraction.js가 설치되어 있을 수 있음.
  • 예를 들어 white-web-sdk가 mathjs를 사용하고 있고, 다른 패키지가 또 다른 버전의 mathjs를 요구하면 충돌 가능.
• node_modules이 제대로 정리되지 않음
  • 이전에 사용하던 패키지의 일부 파일이 남아 있어서 새로운 버전과 충돌하는 경우가 있음.

 

문제의 원인은 크게 3가지 인것 같은데 첫번째 원인인 fraction.js 최신버전과의 호환성 문제로 인해 발생한듯 싶어서 버전을 낮춰서 다운받아 보았다.

터미널실행 : yarn add fraction.js@4.2.0

yarn add fraction.js@4.2.0

 

터미널 실행 : yarn start

yarn start

 

 

 

• 현재 설치된 mathjs와 fraction.js 버전 확인
   

  터미널 실행 : yarn list mathjs

yarn list mathjs

 

 

터미널 실행 : yarn list fraction.js

yarn list fraction.js

 

 

 

 

package.json에 resolutions 추가하여 의존성 강제 고정

 

"resolutions": { "mathjs": "9.5.0", "fraction.js": "4.2.0" }

 

 

 

 

그리고 다시 설치:

터미널 실행 : rm -rf node_modules .yarn.lock (yarn 삭제)

rm -rf node_modules .yarn.lock

 

 

 

터미널 실행 : yarn cache clean --force (캐시지우기)

yarn cache clean --force

 

 

 

 

터미널 실행 : yarn install (재설치 - package.json에서 resolutions를 추가하였으므로)

yarn install

 

 

 

 

 

터미널 실행 : yarn start (실행)

 yarn start

 

 

자 정리해서 말하자면

 

 resolutions란?

resolutions는 Yarn 전용 기능으로, 프로젝트 내에서 특정 패키지의 버전을 강제 지정하는 역할을 합니다.

---

 resolutions을 사용해야 하는 이유

현재 프로젝트에서는 mathjs가 fraction.js@4.2.0을 사용해야 하는데, fraction.js@4.3.7이 함께 설치되어 충돌이 발생하고 있습니다.

문제 요약:

• mathjs@9.5.0이 fraction.js@4.2.0과 호환됨.
• 그러나 다른 패키지(autoprefixer 등)가 fraction.js@4.3.7을 요구해서 함께 설치됨.
• mathjs가 fraction.js@4.3.7을 참조하면서 런타임 오류 발생 (Cannot set properties of undefined (setting 'type')).

이 문제를 해결하려면, fraction.js의 버전을 강제로 4.2.0으로 고정해야 함!
이를 위해 resolutions을 사용하여 fraction.js 버전을 4.2.0으로 강제 지정하면 충돌이 해결될 가능성이 큼.