peerdependency 박살난거 해결해야해

➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies;

프로젝트에서 사용하는 패키지(라이브러리) 중 일부가 자신이 필요로 하는 peer dependecy를 적절하게 제공받지 못하고 있다는 것을 의미한다. 이는 특정 패키지의 peer dependency가 프로젝트의 다른 의존성에 의해 충족되지 않거나 충돌하는 경우에 발생

Peer Dependencies란?

일반적인 종속성(dependencies)은 패키지 자체에 필요한 모듈을 의미하며, 해당 패키지를 설치할 때 함께 설치됩니다. 반면에 피어 종속성은 패키지가 특정 버전 범위의 다른 패키지와 함께 작동해야 함을 나타냅니다. 이때 피어 종속성으로 지정된 패키지는 함께 설치되지 않습니다.
예를 들어, 패키지 A가 패키지 B의 특정 버전 범위를 피어 종속성으로 지정한 경우, 패키지 A를 사용하는 프로젝트에서는 패키지 B의 해당 버전 범위를 설치해야 합니다. 이를 통해 패키지 A와 패키지 B가 호환되도록 보장할 수 있습니다.

문제의 원인

1. 부적절한 버전: 필요한 peer dependency 버전이 맞지 않거나 호환되지 않는 경우.
2. 누락된 의존성: 필요한 peer dependency가 프로젝트에 설치되지 않은 경우.
3. 중복된 의존성: 여러 패키지가 동일한 peer dependency를 다른 버전으로 요구하는 경우.

문제 목록 확인

yarn explain peer-requirements 명령어를 실행하여 어떤 패키지가 문제를 일으키는지 확인할 수 있다.

 ~/Desktop/OntolGlobal/ontol-client-global/mobile-app   DEV-1583-react-native-신규-버전에-따른-기존-라이브러리-버전-호환성-체크-및-업데이트 ±  yarn explain peer-requirements
**p8b1ee** → ✓ @babel/core@npm:7.24.7 provides @babel/core@npm:7.24.7 to @babel/helper-module-transforms@npm:7.24.7 [e0c71]
**p746c5** → ✓ @babel/core@npm:7.24.7 doesn't provide @types/babel__core to @babel/helper-module-transforms@npm:7.24.7 [e0c71]
.
.
p74424 → ✘ @react-native/eslint-config@npm:0.73.2 [e646b] doesn't provide typescript to @typescript-eslint/eslint-plugin@npm:5.62.0 [d75fb] and 4 other dependencies
p55943 → ✓ @react-native/metro-babel-transformer@npm:0.73.15 [048a0] provides @babel/core@npm:7.24.7 to @react-native/babel-preset@npm:0.73.21 [9a66a] and 53 other dependencies
.
.
p45917 → ✘ @typescript-eslint/utils@npm:5.62.0 [ff669] doesn't provide typescript to @typescript-eslint/typescript-estree@npm:5.62.0 [363e0] and 1 other dependency
.
.
p758d5 → ✓ superagent@npm:8.1.2 doesn't provide supports-color to debug@npm:4.3.5 [b2642]

yarn explain peer-requirements 명령어 실행 시 Peer Dependency 목록을 확인 할 수 있으며
✘ 로 표기된 항목들을 해결하면 된다.

각 에러 항목들의 상세 정보는 yarn explain peer-requirements <hash> 명령어로 확인할 수 있다.

문제 목록 및 해결

1. p45917 → ✘ @typescript-eslint/utils@npm:5.62.0 [ff669] doesn't provide typescript to @typescript-eslint/typescript-estree@npm:5.62.0 [363e0] and 1 other dependency

    ~/Desktop/OntolGlobal/ontol-client-global/mobile-app   DEV-1583-react-native-신규-버전에-따른-기존-라이브러리-버전-호환성-체크-및-업데이트 ±  yarn explain peer-requirements p45917
   Package @typescript-eslint/utils@npm:5.62.0 [ff669] is requested to provide typescript by its descendants
   
   @typescript-eslint/utils@npm:5.62.0 [ff669]
   └─ @typescript-eslint/typescript-estree@npm:5.62.0 [363e0] (via *)
      └─ tsutils@npm:3.21.0 [ff669] (via >=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta)
   
   ✘ Package @typescript-eslint/utils@npm:5.62.0 [ff669] does not provide typescript.
   

   문제 설명

   • @typescript-eslint/typescript-estree 패키지의 버전 5.62.0 [363e0]은 @typescript-eslint/utils의 모든 버전(*) 요구한다.
   • tsutils 패키지의 버전 3.21.0 [ff669]은 @typescript-eslint/typescript-estree에서 요구하는 버전 범위(>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta)에 맞춰 선택되었다.
   • @typescript-eslint/typescript-estree와 tsutils는 모두 typescript를 피어 의존성으로 요구한다.
   • 그러나 @typescript-eslint/utils 패키지의 버전 5.62.0 [ff669]은 typescript를 제공하지 않는다.

   원인 후보

   • package.json에 typescript가 추가되어 있지 않아 typescript를 찾을 수 없다.
   • @typescript-eslint/utils 패키지에서 typescript를 직접 의존성으로 찾지 못했기 때문이다.

   원인 추적 및 해결

   • package.json에 typescript 가 설치되어있으므로 @typescript-eslint/utils 패키지에서 typescript를 직접 의존성으로 찾지 못했기 때문이 원인으로 추정
   • .yarnrc.yml 파일의 pacakgeExtensions에 @typescript-eslint/utils의 의존성에 typescript 를 명시적으로 추가해줌(아래 코드)

   compressionLevel: mixed
   
   enableGlobalCache: false
   
   nodeLinker: node-modules
   
   packageExtensions:
   
     '@typescript-eslint/utils@5.62.0': <- 이부분
       dependencies:                    <- 이부분
         'typescript': '*'              <- 이부분
   
   yarnPath: .yarn/releases/yarn-4.3.0.cjs
   

   • @typescript-eslint/utils 패키지는 typescript를 직접 의존성으로 가지고 있지 않습니다. 대신 @typescript-eslint/typescript-estree와 같은 하위 의존성에서 typescript를 필요로 합니다.
   • Yarn의 의존성 해결 과정에서 @typescript-eslint/utils가 typescript를 직접 찾지 못하면 피어 의존성 문제가 발생할 수 있습니다.
   • .yarnrc.yml에 packageExtensions를 사용하여 @typescript-eslint/utils에 typescript 의존성을 명시적으로 추가함으로써, Yarn이 typescript를 올바르게 찾고 사용할 수 있도록 도와줍니다.
   • 이렇게 하면 @typescript-eslint/utils와 그 하위 의존성에서 요구하는 typescript 버전이 프로젝트에 설치된 typescript 버전과 일치하게 되어 문제가 해결됩니다.

2. p74424 → ✘ @react-native/eslint-config@npm:0.73.2 [e646b] doesn't provide typescript to @typescript-eslint/eslint-plugin@npm:5.62.0 [d75fb] and 4 other dependencies

    tesser@Tessers-iMac  ~/Desktop/OntolGlobal/ontol-client-global/mobile-app   DEV-1583-react-native-신규-버전에-따른-기존-라이브러리-버전-호환성-체크-및-업데이트 ±  yarn explain peer-requirements p74424
   Package @react-native/eslint-config@npm:0.73.2 [e646b] is requested to provide typescript by its descendants
   
   @react-native/eslint-config@npm:0.73.2 [e646b]
   ├─ @typescript-eslint/eslint-plugin@npm:5.62.0 [d75fb] (via *)
   │  ├─ @typescript-eslint/type-utils@npm:5.62.0 [ff669] (via *)
   │  │  ├─ @typescript-eslint/typescript-estree@npm:5.62.0 [363e0] (via *)
   │  │  │  └─ tsutils@npm:3.21.0 [ff669] (via >=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta)
   │  │  └─ tsutils@npm:3.21.0 [ff669] (via >=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta)
   │  └─ tsutils@npm:3.21.0 [ff669] (via >=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta)
   └─ @typescript-eslint/parser@npm:5.62.0 [d75fb] (via *)
      └─ @typescript-eslint/typescript-estree@npm:5.62.0 [363e0] (via *)
         └─ ...
   

   문제 설명

   • 문제 1과 마찬가지로 @react-native/eslint-config@0.73.2 패키지가 하위 의존성들에게 typescript 를 요구받고 있으나 제공하지 못해서 발생하는 경고

   원인 후보

   • package.json에 typescript가 추가되어 있지 않아 typescript를 찾을 수 없다.
   • @react-native/eslint-config@0.73.2 패키지에서 typescript를 직접 의존성으로 찾지 못했기 때문이다.

   원인 추적 및 해결

   • 1번과 동일한 이유로 .yarnrc.yml 파일의 pacakgeExtensions에 @react-native/eslint-config@0.73.2 의 의존성에 typescript 를 명시적으로 추가해줌(아래 코드)

   compressionLevel: mixed
   
   enableGlobalCache: false
   
   nodeLinker: node-modules
   
   packageExtensions:
   
     '@react-native/eslint-config@0.73.2': <- 이부분
       dependencies:                       <- 이부분
         'typescript': '*'                 <- 이부분
   
   yarnPath: .yarn/releases/yarn-4.3.0.cjs
   

3. 기타 다른 에러들도 모두 같은 원인과 해결방법을 통해서 제거

완료

완료 yarnrc.yml 파일

compressionLevel: mixed

enableGlobalCache: false

nodeLinker: node-modules

packageExtensions:
  '@react-native/babel-plugin-codegen@0.73.4':
    dependencies:
      '@babel/preset-env': ^7.20.0
      '@babel/core': ^7.24.7
      '@types/babel__core': '*'
  babel-plugin-styled-components@2.1.4:
    dependencies:
      '@babel/core': ^7.24.7
  babel-plugin-transform-flow-enums@0.0.2:
    dependencies:
      '@babel/core': ^7.24.7
  react-native@0.73.8:
    dependencies:
      '@babel/core': ^7.24.7
      '@babel/preset-env': ^7.20.0
  '@babel/helper-module-transforms@7.24.7':
    dependencies:
      '@types/babel__core': '*'
  '@typescript-eslint/utils@5.62.0':
    dependencies:
      'typescript': '*'
  '@react-native/eslint-config@0.73.2':
    dependencies:
      'typescript': '*'

yarnPath: .yarn/releases/yarn-4.3.0.cjs

주의 사항

이 해결 방법은 Yarn의 고급 기능인 packageExtensions을 활용하여 특정 패키지의 의존성을 직접 조작하는 것으로, 복잡한 의존성 문제를 해결하는 데 도움이 될 수 있다. 다만 이러한 설정을 추가할 때는 프로젝트의 의존성 구조를 잘 이해하고 있어야 하며, 신중하게 적용해야 한다.

참고

https://yceffort.kr/2021/10/debt-of-package-json
https://wannysim.me/blog/yarn-package-extensions/