npm link React Hook 에러

npm 패키지를 만들다가 로컬에서 테스트를 할 일이 생겨서 npm link를 사용하여 로컬의 글로벌에 심볼릭 링크(바로가기)를 만들고 다른 프로젝트에서 해당 프로젝트를 받아와서 사용하면 에러가 발생한다.

에러 내용

Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef') at useRef (http://localhost:3000/static/js/bundle.js:3541:25) at ImageSlider (http://localhost:3000/static/js/bundle.js:359:73) at renderWithHooks (http://localhost:3000/static/js/bundle.js:24554:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28525:17) at beginWork (http://localhost:3000/static/js/bundle.js:29828:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14810:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14854:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14911:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:34809:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:34057:16)

 

원인 예상 1:

• 패키지를 배포하고 npm insall로 설치를 했을때는 아무 문제가 없었던 걸로 봐서는 패키지의 프로젝트에 react가 해당 프로젝트의 react와 겹쳐서 에러가 나는 걸로 예상
• 결과 : 패키지의 peerDependencies 필드에 react 와 react-dom을 추가해 보고 패키지의 프로젝트 디렉토리에서 npm uninstall react, react-module로 지워도 해결이 안 됨

해결 :

위에 원인이 맞았고 패키지의 프로젝트 디렉토리에서 npm uninstall로 react와 react-dom을 지우고 수동으로 node-modules에 react와 react-dom 디렉토리 자체를 삭제하니 해결됐다!

 

이틀간의 삽질 끝...