hook호출시 에러, Invalid hook call. Hooks can only be called inside of the body of a function component

Array.prototype·2022년 11월 11일
0

Mismatching Versions of React and React DOM

hook을 사용할 수 있는 버전인 16.8.0보다 react, react-dom 패키지의 버전이 높아야함.

Breaking the rules of hooks

hooks를 호출할 때는 함수형 컴포넌트의 최상위에서 호출해야한다.

  • 렌더함수안에서 호출하지 않기
  • 이벤트 핸들러안에서 호출하지 않기
  • 다른 훅 내부에서 호출하지 않기

Duplicated React

hooks가 제대로 동작하려면 어플리케이션 코드의 import와 react-dom의 import가 같은 모듈로 해석되어야 한다.
만일 다른 두개의 export객체로 해석된다면 결국 두개의 react package가 복사된 경우가 발생 할 수 있다.

yarn list react 로 전체폴더 내부에서 react를 사용하는 곳을 찾아보니
프로젝트에서는 18버전, 패키지에서는 17버전을 사용하고 있었다.
패키지의 리액트 버전을 프로젝트와 동일하게 18버전으로 올려주고 난 후 에러는 없어졌다.

profile
frontend developer

0개의 댓글