[React] Error: Invalid hook call.

오류 발생

https://github.com/hochan222/holee-contextmenu

hochan222/holee-contextmenu

 

npm에 배포하려고 contextmenu 라이브러리를 만드는 와중에 CRA를 사용해서 demo를 만들다가 발생했다.

Error: 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 https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

 

문제 원인

React 오류 메세지에서는 Invalid hook call.의 원인을 세가지 추론한다.

 

1. You might have mismatching versions of React and 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.

1. React와 React DOM의 버전 불일치

Hooks를 아직 지원하지 않는 react-dom(< 16.8.0) 또는 react-native(< 0.59) 버전을 사용 중인경우 오류가 발생할 수 있다.

 

=> 하지만, 내 react, react-dom 버전은 모두 그 이상이므로 패스.

 

2. 잘못된 Hooks 규칙

Hooks에는 꼭 지켜야하는 여러가지 규칙들이있다. https://reactjs.org/docs/hooks-rules.html 를 참고하자. 하지만, 내 코드의 경우 모두 Hooks를 최상위에서 사용했고, 다른 규칙들도 잘 지켰으므로 문제가 없다. 무엇보다 라이브러리로 분리하지 않았을때, 잘 작동하였다. (한 파일 내에서 잘 동작했으므로 패스)

 

3. React 중복

Hooks가 작동하려면 react 애플리케이션 코드에서 react와 react-dom를 import를 할 때 패키지 내에서 동일한 모듈이어야한다.

react를 import하는데 react 패키지 사본 이 두 개 있는 경우 발생할 수 있다.

 

우리는 다음 명령어로 확인해 볼 수 있다.

npm ls react

둘 이상의 React가 표시되면 왜 이런 일이 발생하는지 파악하고 종속성 트리를 수정해야 한다. 이 경우 peerDependencies가 아닌 dependencies 나 devDependencies으로 잘못 지정 되었을 수 있다. 

 

https://nodejs.org/es/blog/npm/peer-dependencies/

Peer Dependencies | Node.js

 

문제 해결 과정

package.json의 devDependencies에 있는 react와 react-dom을 peerDependencies로 옮겼다.

  "devDependencies": {
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

  "devDependencies": {
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

해결 완료!

 

참고

https://reactjs.org/warnings/invalid-hook-call-warning.html

Invalid Hook Call Warning – React