package.json에서 yarn resolutions 적용하기

• 프로젝트: 채식 지도
• 키워드: resolutions, yarn selective dependency resolutions, deduplicate dependencies, package.json, react-window
• 상황
  1. 프로젝트에서 react-window 라이브러리를 사용하고자한다.
  2. react-window의 type definitions package인 '@types/react-window'를 설치한다.
  3. react-window를 사용할 때 TS error가 발생한다.
     

     

     TS ERROR

• 해결 과정
  
  1. 먼저 오류 메시지를 자세히 읽어본다.
     
     Type 'React.ReactNode' is not assignable to type 'import("/.../node_modules/@types/react-window/node_modules/@types/react/index").ReactNode'.
     
     react-window의 @types/react와 관련하여 호환이 맞지 않음을 확인할 수 있다. 
     
     
  2. node_modules 에 있는 react-window 라이브러리를 살펴본다.

       // node_modules/@types/react-window/package.json
     {
       "name": "@types/react-window",
       ...
       "dependencies": {
         "@types/react": "*"
       },
       ...
     }

     @types/react의 버전이 asterisk(*) 로 되어있어 최신 버전이 다운받아질 것이다.
     
     
  3. yarn.lock 파일에서 '@types/react' 를 검색해본다.
     

       // yarn.lock
     "@types/react-window@^1.8.5":
       version "1.8.5"
       ...
       dependencies:
         "@types/react" "*"
     
     "@types/react@*":
       version "18.0.9"
       ...
       dependencies:
         "@types/prop-types" "*"
         "@types/scheduler" "*"
         csstype "^3.0.2"
     
     "@types/react@17.0.37":
       version "17.0.37"
       ...
       dependencies:
         "@types/prop-types" "*"
         "@types/scheduler" "*"
         csstype "^3.0.2"

     현재 프로젝트에서 사용하고 있는 React의 버전은 "17.0.2"이며, @types/react는 "17.0.37"을 사용하고 있었다. 하지만 react-window에 의해 최신 버전인 "18.0.9" @types/react가 설치되어 타입이 꼬인 것을 확인했다.
     
     + 220526 추가 작성
     "npm ls @types/react" 명령어를 통해 타입 선언 패키지의 중복을 간단히 확인할 수 있다.
     ├─┬ @types/react-window@1.8.5
     │ └── @types/react@18.0.9
     └── @types/react@17.0.37
     
     
     
  4. package.json의 dependencies에 의해 프로젝트 전체와 맞지 않는 type definitions file이 설치되는 것을 막아야한다.
     package.json에 resolutions 필드를 추가하여 하위 패키지들의 버전을 명시할 수 있다.
     (https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/)

       // package.json
     "resolutions": {
       "@types/react": "17.0.37"
     }

     
     
     이제 다시 yarn install을 실행한 후, yarn.lock 파일을 확인해본다.
     

       // yarn.lock
     "@types/react-window@^1.8.5":
       version "1.8.5"
       ...
       dependencies:
         "@types/react" "*"
     
     "@types/react@*", "@types/react@17.0.37":
       version "17.0.37"
       ...
       dependencies:
         "@types/prop-types" "*"
         "@types/scheduler" "*"
         csstype "^3.0.2"

      "18.0.9" 버전은 설치되지 않고, "17.0.37" 버전만 설치된 것을 확인할 수 있다!