npm 특정 버전의 패키지를 사용하도록 지정하기

 

 

 

npm 은 hoisting 알고리즘을 통해 여러버전의 패키지들을 관리하고 있습니다

 

여러분의 프로젝트에서 관리하고 있는 의존성중에서

 

특정 패키지의 버전을 다른 버전을 쓰도록 바꾸고 싶을때가 있을수 있습니다

 

예를 들면 어떤 패키지의 특정버전에서의 보안문제로 인해서 변경을 해야한다던가

 

다른 fork된 저장소를 쓴다던가 하는 다양한 이유들이 있겠습니다

 

 

이럴때 활용할수 있도록 npm에서는 overrides라는 프로퍼티를 제공하고 있습니다

 

package.json 파일을 다음과 같이 수정합니다

 

{
  "overrides": {
    "foo": "1.0.0"
  }
}

해당 패키지에서 하위의 foo 패키지의 버전을 1.0.0을 사용하도록 강제로 지정합니다

 

하위의 뎁스를 좀더 세밀하게 조정할수 있습니다

{
  "overrides": {
    "bar": {
      "foo": "1.0.0"
    }
  }
}

 

위의 예제는 bar 패키지 하위의 foo 패키지만 1.0.0 버전으로 변경하도록 지정하는것입니다

 

당연히 2depth 뿐만 아니라 좀더 복잡한 depth에서도 변경 가능합니다

 

{
  "overrides": {
    "baz": {
      "bar": {
        "foo": "1.0.0"
      }
    }
  }
}

 

 

특정 버전의 패키지의 하위 패키지만 변경하는것도 가능합니다

{
  "overrides": {
    "bar@2.0.0": {
      "foo": "1.0.0"
    }
  }
}

 

버전의 범위를 설정하는것 또한 가능합니다

 

 

{
  "dependencies": {
    "foo": "^1.0.0"
  },
  "overrides": {
    // BAD, will throw an EOVERRIDE error
    // "foo": "^2.0.0"
    // GOOD, specs match so override is allowed
    // "foo": "^1.0.0"
    // BEST, the override is defined as a reference to the dependency
    "foo": "$foo",
    // the referenced package does not need to match the overridden one
    "bar": "$foo"
  }
}

 

하지만 버전을 무작정 바꿀수 있지는 않습니다

 

해당 패키지에 명시된 버전 범위에 한해서만 변경이 가능합니다

 

또한 "foo": "$foo" 이렇게 $ 표시를 통해 선언하여 상단의 의존성에 설정된 버전을 참조하도록 설정하는것도 가능합니다

 

 

https://github.com/npm/cli/issues/5850

bug: overrides property only honored when running install the first time · Issue #5850 · npm/cli

 

그런데 아쉽게도 이 기능에 아직 고쳐지지 않는 버그가 있습니다(2023/7/7 기준)

 

overrides 프로퍼티는 첫 install 시에만 동작합니다

 

그래서 기존 프로젝트에 overrides를 적용하고 싶으시다면

 

프로젝트의 node_modules를 모두 지우고 package-lock.json 파일을 지운다음에

 

npm install을 설정해야만 overrides 프로퍼티가 적용됩니다... 이럴수가....

 

 

npm ls react

 

 라는 명령어를 통해 react가 설치된 패키지를 조회해볼수 있는데요

 

{
  "dependencies": {
    "next": "^13.4.9",
    "nextra": "^2.8.0",
    "nextra-theme-docs": "^2.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "overrides": {
    "react": "$react",
    "react-dom": "$react-dom"
  }
}

 

이렇게 하위 패키지의 버전을 재지정하여 

 

 

이렇게 적용전과 적용후에 다른 모습을 볼수 있습니다