Npm package install시 Invalid hook call 에러

 

 

 "Invalid hook call. Hooks can only be called inside the body of a function component"

이러한 에러를 마주하셨다면 에러는 여러 가지 이유에서 발생하게 됩니다.

 

1. Having a mismatch between the versions of react and react-dom.

(react 및 react-dom의 버전이 일치하지 않습니다.)

 

✅ 버전이 동일한지 확인해보세요.

 

2. Having multiple versions of the react package in the same project.

(동일한 프로젝트에 여러 버전의 패키지가 있습니다.)

 

✅ 여러 버전의 패키지가 있는지 확인해보세요.

 

3. Trying to call a component as a function, e.g. App() instead of <App />

(컴포넌트 함수로 호출하려고 시도합니다. 예를 들어, <App /> 대신에 App()을 사용)

 

✅ 정확한 컴포넌트 함수를 작성했는지 확인해보세요.

 

4. Using hooks inside of classes or a function that isn't a component or a custom hook.

 

function counter({ 
🗣️ 이런 함수가 있다는 가정하에 이름은 대문자로 바꾸어줘야 합니다.
✅ function Counter({


🗣️ 또한 이름 앞에 'use'가 붙지 않았기 때문에 사용자 정의 hooks 라고 할수 없습니다.

🗣️ 함수 컴포넌트 또는 사용자 정의 hooks 내부에서만 hooks를 사용할 수 있으므로 이름 앞에 'use'를 붙여줍니다.
✅ function useCounter({


✅ React는 이제 useCounter를 사용자 정의 hooks로 인식하므로 내부에서 hook을 사용할 수 있습니다.

 

✅ function의 이름은 대문자로 시작해야 합니다. 

✅ 함수 컴포넌트, 사용자 지정 hooks 말고 다른 곳에서 hook를 지정한 게 아닌지 확인해보세요.

 

저 같은 경우는 1번 react와 react-dom의 버전이 일치하지 않아서 에러가 발생하였습니다.

 

🔆 해결방법

 

프로젝트의 루트 디렉터리에서 터미널을 열고 react및 react-dom패키지의 버전을 업데이트하여

버전이 일치하고 오래된 버전을 사용하고 있지 않은지 확인합니다.

 

# 👇️ with NPM
npm install react@latest react-dom@latest

# 👇️ ONLY If you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest

# ------------------------------------------------------------------

# 👇️ with YARN
yarn add react@latest react-dom@latest

# 👇️ ONLY If you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

 

✅ 오류가 계속된다면 node_modules, package-lock.json (package.json 아님) 파일을 삭제하고

npm 설치를 다시 실행한 후 IDE(VSCode)를 다시 시작해보시길 바랍니다.

이 오류는 종종 동일한 프로젝트에서 여러 버전의 반응이 있을 때 발생합니다.

 

# 👇️ delete node_modules and package-lock.json

rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache

npm cache clean --force

npm install

 

 

 

 

❤️ 도움 주신 분 :

https://bobbyhadz.com/blog/react-invalid-hook-call-hooks-can-only-be-called-inside-body