Peer Dependencies 문제 인지 및 해결

문제 인지

• 토이 프로젝트의 유지보수를 하다가 아래와 같은 에러를 만나게 되었습니다.

You are loading @emotion/react when it is already loaded. 
Running multiple instances may cause problems. This can happen if multiple versions are used, 
or if multiple builds of the same version are used.

• emotion/react가 로드 되어있는 상태에서 emotion/react를 또 로드하고 있다는 에러 메세지였습니다.
• next.js 내부에서 emotion을 사용할 것으로는 짐작을 하고 있었지만, 추가적으로 emotion을 설치한 적은 없어서 약간은 당혹스러웠습니다.
• 일단은 문제를 해결하기위해 검색을 했습니다.
  github issue에 달린 답변을 보던 중, Peer Dependencies라는 키워드를 알게 되었습니다.

https://github.com/emotion-js/emotion/discussions/2795

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if mult

 

Peer Dependencies

제가 처한 상황을 Node.js 공식 홈페이지에서 설명하는 Peer Dependencies를 읽고 아래와 같이 이해해보았습니다.

• npm으로 패키지를 관리할 때, 여러 플러그인을 설치하는 상황이 생깁니다.
• A라는 플러그인은 @emotion/react 11.8.1 버전을 사용하고 있었습니다.
• B라는 플러그인은 @emotion/react 11.11.1 버전을 사용하고 있었습니다.
• 즉, A와 B는 같은 의존성의 다른 버전을 사용하고 있습니다.
• 따라서 A와 B는 같은 의존성을 사용하고 있으므로, 효율을 위해 동료(Peer) 의존성을 설정해주어야 합니다.

 

문제 해결

• 어떤 플러그인에서 Peer Dependencies를 요구하는지 찾아보기 위해 먼저 VSCode에서 검색을 해보았습니다.

제 경우엔 @emotion/react가 문제가 있었습니다.

• Next.js에서는 @emotion/react 11.11.1 버전을 사용하고, select를 구현하기 위해 설치했던 의존성인 react-select는 @emotion/react 11.8.1 버전을 사용하고 있었습니다.
• react-select가 더 하위버전의 @emotion/react를 사용하고 있고, 의존성 트리에서도 아래에 위치하므로, react-select의 package.json에 peerDependencies를 설정해주었습니다.

node_modules > react-select > package.json

• peerDependencies를 설정해줌으로써 제가 사용하는 react-select는 11.8.1버전 이상의 @emotion/react와 동료 의존성을 갖게 했습니다.
• ^11.8.1의 의미는 11.8.1 이상의 어떤 버전도 허용한다는 것을 의미합니다. 다만 12로 넘버링이 바뀌면 의존성을 사용할 수 없게 됩니다.

 

해결 후 느낀점

• 위와 같이 Peer Dependencies를 설정하고 난 후 같은 에러는 나지 않게 되었습니다.
• 프로젝트에 많은 라이브러리를 도입할수록, 해결해야 할 의존성 문제가 증가한다는 것을 체감하게 되었습니다.
• 간단한 것을 도입할때는 직접 개발해서 의존성을 낮추는 것이 더 이롭겠다는 생각을 하게 되었습니다.