[TIL] npm 의존성과 Sember 버전지정자

문제

Recoil : Duplicate atom key

 

In development, when a file is changed, Next.js re-builds the relevant page entry file.Because it's the same Node.js process, the 
atom
 has already been declared.The same thing can happen with HMR when the file change triggers a rebuild of the whole file, or even when the 
atom
 is declared inside a component lifecycle/hook and only that is being hot-replaced.

일반적으론 같은 키의 atom이 재생성되었을때 나오는 에러이나 

내 경우는 next로 개발중 파일이 수정되면 atom이 재생성돼서 나오는 에러

 

next와 recoil을 사용할때 발생하는 고질적 문제이다.

 

RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false

.env에 위 코드를 추가하면 무시된다.

 

문제2

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-lottie@1.2.3
npm ERR! Found: react@18.2.0

 

react-lottie와 react가 호환되지 않는 의존성문제

peer react@"^0.14.7 || ^15.0.0 || ^16.0.0"

위 에러는 

^0.14.7: React 버전 0.14.7 이상, 하지만 0.15.0 미만의 버전과 호환됩니다.

^15.0.0: React 버전 15.0.0 이상, 하지만 16.0.0 미만의 버전과 호환됩니다.

^16.0.0: React 버전 16.0.0 이상, 하지만 17.0.0 미만의 버전과 호환됩니다.

 

의 뜻을 내포한다. npm의 버전에 대해 더 자세히 알아보자

 

버전 지정자

npm에서 사용되는 버전 지정 방식은 SemVer (Semantic Versioning)라는 규칙을 따릅니다. 

SemVer는 버전 번호를 "MAJOR.MINOR.PATCH" 형식으로 구성하

 

MAJOR: 주 버전 - 이 버전이 변경되면, 이전 버전과 호환되지 않는 변경이 발생했음을 나타냅니다. 

MINOR: 부 버전 - 이 버전이 변경되면, 이전 버전과 호환되는 새로운 기능이 추가되었음을 나타냅니다.

PATCH: 패치 버전 - 이 버전이 변경되면, 이전 버전과 호환되는 버그 수정이 이루어졌음을 나타냅니다.

 

 

 ^ (caret): 이 지정자를 사용하면, "MAJOR" 버전이 동일하고 "MINOR" 또는 "PATCH" 버전이 지정된 버전보다 크거나 같은 모든 버전을 허용합니다. 예: ^1.2.3은 1.2.3 이상 2.0.0 미만의 모든 버전을 허용합니다.

 

 ~ (tilde): 이 지정자를 사용하면, "MAJOR" 및 "MINOR" 버전이 동일하고 "PATCH" 버전이 지정된 버전보다 크거나 같은 모든 버전을 허용합니다. 예: ~1.2.3은 1.2.3 이상 1.3.0 미만의 모든 버전을 허용합니다. 

 

* (asterisk): 이 지정자를 사용하면, 모든 버전을 허용합니다. 

 

> (greater than), < (less than), <= (less than or equal to), >= (greater than or equal to): 이러한 지정자를 사용하여 특정 버전보다 크거나 작은 버전을 지정할 수 있습니다. 

 

|| (logical OR): 이 지정자를 사용하여 여러 버전 범위를 지정할 수 있습니다. 예: ^0.14.7 || ^15.0.0 || ^16.0.0은 세 개의 다른 버전 범위 중 하나를 만족하는 모든 버전을 허용합니다.

 

 

해결

react-lottie에서는 업데이트가 이루어지지 않아 기능적으로는 문제가 없지만 리액트 18을 지원하지 않는다.

 

직접 node_module 에서 해당 라이브러리를 찾아 종속성을 수정하는 방법은 

npm install 로 다시 에러가 재발하며

 

--force 방법은 깨끗하지 않다.

 

결론

 

해당 라이브러리를 제거하고 lottie-react 라이브러리를 설치했다.

의존성을 미리 확인하여 충돌이 없도록 했다.