Invalid Hook Call Warning

Hooks can only be called inside the body of a function component.

개발자 툴에서 확인된 오류 메시지였는데 아래와 같은 이유로 발생한다고 React 공식 홈페이지에서 확인했다.

  1. React와 ReactDOM의 버전이 일치하지 않는다.

  2. Hooks 규칙을 위반했다.

  3. 같은 앱에 React가 한 개 이상있을 수 있다.

 

React와 ReactDOM의 버전 불일치인가?

packag.json에서 확인했는데 react와 react-dom 버전은 동일 했다.

또 다른 확인 방법은 npm ls react 또는 npm ls react-dom 명령어로 확인 할 수 있다.

해당 이미지는 명령어 입력 후 얻은 결과물 중 하나인데

현재 리액트 버전때문에 react-router-dom, styled-components 라이브러리를 사용하지 못한다는 것을

확인할 수 있었다.

 

해결 방법

npm install react@17.0.2  react-dom@17.0.2 --force

react 18 alpha가 아닌 17.0.2 버전으로 변경했더니 에러 메시지가 없어졌다.