이전에 개발했던 next 프로젝트를 수정 없이 실행했는데, 3달전에는 멀쩡히 실행됐던 프로젝트가 다음과 같은 에러가 발생하여 실행되지 않았습니다.
분명 코드 내부를 수정한 적이 없고, 실행만 했으니 종속성 문제라고 판단했습니다.
1. react, react-dom 버전 업그레이드
https://pimpdevelop.tistory.com/14
[에러해결] Invalid Hook Call Error
음악 관리 프로그램에서 며칠 전부터 Invalid Hook Call(유효하지 않은 Hook을 요청)하고 있다며 에러가 발생해 구동되지 않았다. useEffect(() => { callApi() .then(res => setMusics(res)) // 에러가 발생한 부분 .catc
pimpdevelop.tistory.com
레퍼런스를 더 찾아보니 React 버전 문제일수도 있어 version을 17에서 18로 업그레이드하였습니다.
yarn install react react-dom
저같은 경우는 모노레포 환경이라 다음과 같이 설치하였습니다.
yarn workspace [workspace name] add react react-dom
하지만 똑같은 에러가 계속 반복해서 추가로 찾아보았습니다.
2. Duplicate React
해당 에러의 근본적인 원인은 하나의 라이브러리에서 여러 react로 해석된다는 말이었습니다. 참고한 레퍼런스의 말을 인용해보겠습니다.
"Hooks가 제대로 작동하려면 내 어플리케이션의 코드의 import와 react-dom의 import가 같은 모듈로 해석되어야 한다.
만일 다른 두개의 export 객체로 해석하게 된다면 결국 두개의 react package가 복사된 경우가 발생 할 수있다"
npm ls react 명령어를 통해 하나 이상의 react가 있나 확인해보았습니다.
npm ls react
이렇게 해당 라이브러리에서는 react가 @17.0.2인데, 설치된거는 @18.2.0이라고 에러가 발생하였습니다.
다시 확인해보니 모노레포에서 root package에 react, react-dom 버전은 17로 그대로였습니다. 그래서 root package.json의 버전도 마찬가지로 업그레이드 하니 해결 되었습니다 :)
yarn react react-dom -W
https://github.com/themoment-team/hello-gsm-front/pull/347
[All] Update dependency version(react, react-dom, next) by yoosion030 · Pull Request #347 · themoment-team/hello-gsm-front
개요 💡 next version 충돌 문제를 해결했습니다. 작업내용 ⌨️ 1. client workspace에서 version 수정 client 에서만 수정하면 해결될 줄 알았는데 다음과 같은 문제가 발생했습니다. 2. root workspace 에서 depe
github.com
관련 pr 첨부하면서 글 마치도록 하겠습니다!
'에러일지' 카테고리의 다른 글
이전에 개발했던 next 프로젝트를 수정 없이 실행했는데, 3달전에는 멀쩡히 실행됐던 프로젝트가 다음과 같은 에러가 발생하여 실행되지 않았습니다.
분명 코드 내부를 수정한 적이 없고, 실행만 했으니 종속성 문제라고 판단했습니다.
1. react, react-dom 버전 업그레이드
https://pimpdevelop.tistory.com/14
[에러해결] Invalid Hook Call Error
음악 관리 프로그램에서 며칠 전부터 Invalid Hook Call(유효하지 않은 Hook을 요청)하고 있다며 에러가 발생해 구동되지 않았다. useEffect(() => { callApi() .then(res => setMusics(res)) // 에러가 발생한 부분 .catc
pimpdevelop.tistory.com
레퍼런스를 더 찾아보니 React 버전 문제일수도 있어 version을 17에서 18로 업그레이드하였습니다.
yarn install react react-dom
저같은 경우는 모노레포 환경이라 다음과 같이 설치하였습니다.
yarn workspace [workspace name] add react react-dom
하지만 똑같은 에러가 계속 반복해서 추가로 찾아보았습니다.
2. Duplicate React
해당 에러의 근본적인 원인은 하나의 라이브러리에서 여러 react로 해석된다는 말이었습니다. 참고한 레퍼런스의 말을 인용해보겠습니다.
"Hooks가 제대로 작동하려면 내 어플리케이션의 코드의 import와 react-dom의 import가 같은 모듈로 해석되어야 한다.
만일 다른 두개의 export 객체로 해석하게 된다면 결국 두개의 react package가 복사된 경우가 발생 할 수있다"
npm ls react 명령어를 통해 하나 이상의 react가 있나 확인해보았습니다.
npm ls react
이렇게 해당 라이브러리에서는 react가 @17.0.2인데, 설치된거는 @18.2.0이라고 에러가 발생하였습니다.
다시 확인해보니 모노레포에서 root package에 react, react-dom 버전은 17로 그대로였습니다. 그래서 root package.json의 버전도 마찬가지로 업그레이드 하니 해결 되었습니다 :)
yarn react react-dom -W
https://github.com/themoment-team/hello-gsm-front/pull/347
[All] Update dependency version(react, react-dom, next) by yoosion030 · Pull Request #347 · themoment-team/hello-gsm-front
개요 💡 next version 충돌 문제를 해결했습니다. 작업내용 ⌨️ 1. client workspace에서 version 수정 client 에서만 수정하면 해결될 줄 알았는데 다음과 같은 문제가 발생했습니다. 2. root workspace 에서 depe
github.com
관련 pr 첨부하면서 글 마치도록 하겠습니다!
