React Invalid Hook Call 해결 : pnpm Monorepo에서 React 중복 원인

1. 문제 상황

하위 프로젝트(client)를 하나 더 생성했을 때 pnpm test 오류가 발생했다.

Invalid Hook Call Warning

[ 디렉터리 구조 ]
apps/
├── admin/
└── client/  ⭠ 새로 생성한 프로젝트

 

2. 문제 확인

client 디렉터리를 생성해도 컴포넌트, 훅 테스트를 개별로 실행하면 오류가 발생하지 않았다.

훅 테스트 결과

훅 없는 컴포넌트 테스트 결과

컴포넌트와 훅이 결합된 기능 테스트를 할 때 오류가 발생했다.

 

3. 해결 방안 탐색

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

오류 출력 문구에서 3가지 이유를 볼 수 있었다.

1. React와 React DOM 버전 불일치
2. 훅 사용 규칙 미준수
3. 동일 앱에서 React 중복 사용

하나씩 알아봤다.

1번 문제)
pnpm ls를 입력했을 때 버전은 둘 다 동일했다.

React 관련 패키지 버전 확인

2번 문제)
훅은 컴포넌트 최상위에서 사용 중이었다.

훅 사용 규칙 준수 확인

3번 문제)
admin package.json에는 React 관련 패키지가 없었지만 client 프로젝트에서는 있었다.

client/package.json

 

4. 해결 방안 적용

client/package.json에서 react 관련 패키지를 삭제하고
루트 package.json에서 React 패키지를 overrides로 적용했다.

/pacakge.json 일부

이후 정상적으로 컴포넌트 기능 테스트가 진행되었다.

원인은 client/package.json과 /package.json 파일에서 React 패키지 의존성이 중복되어서 생긴 문제였다.

 

참고
- Invalid Hook Call Warning – React