[React] Invalid hook call. Hooks can only be called inside of the body of a function component.. 에러 해결방법

next.js error: cannot find module 'react'

 

프로젝트 진행하고 실행하는데 갑자기 에러가 발생하면서 react 모듈을 찾을 수 없다는 에러가 발생했다

응? 분명 react 설치했을 텐데.. 해서 구글링을 통해 github에 누군가 남겨놓은 해결방안을 따라 해 봤다

local에 react react-dom을 설치하라 해서 그대로 따라 했는데,, (이러면 안 됬었는데,,,)

 

 

 

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

 

뭔가 느낌상 더 불길한 에러가 발생했다

그래도 에러가 발생한 대략적인 3가지 이유를 알려줘서 차례대로 봤는데

 

 

package.json에서 react react-dom 버전이 일치했고,

훅스의 규칙도 잘 지켜서 사용했다

 

그렇담 마지막 3번인데..

아까 위에서 발생한 에러를 해결한다고 리액트를 다시 설치했던 게 문제였던 것이다

 

 

작업 경로에서 npm ls react를 입력하면 에러가 발생한다.

즉, 나의 현재 작업 폴더에서 react의 버전과 local에 내가 또다시 설치해버린 react의 버전이 다른 것

 

그래서 Users의 node_modules 폴더의 경로로 들어가서

npm uninstall react react-dom으로 패키지를 지웠고,

다시 npm i react@원하는 버전 react-dom@원하는 버전으로 설치했다

여기서 @원하는 버전은 본인의 작업폴더의 버전과 맞춰야한다

 

아, 그리고 node_modules 폴더에 react-is라는 폴더의

package.json에도 원하는 버전으로 다시 설치하기 전의 다른 버전이 있어서

여기도 버전을 싹 다 변경 후, 다 끄고 다시 실행했더니 해결되었다 bbb 

 

 

클론코딩을 똑같이 따라서만 작성할땐 딱히 에러가 발생하는 문제가 없었는데

혼자서 변경해서, 최대한 안보고 만드려니까 확실히 하루에 한 번씩은 새로운 에러와 마주치게 된다

이러면서 성장하는거겠지 !!!!!!!! 😂

발생한 모든 에러들을 잘 기억해뒀다가 다음엔 더 쉽게 해결해버리자 🔥