몇 번, 뒤틀릴 것 같았는가 ...



React Hooks를 사용하기 시작했을 무렵, CRA 등으로 만든 사이트는 어쨌든

Gatsby를 사용했을 때 등 상당한 빈도로 Invalid hook call warning에 휩쓸려 최악의 생각을 한 사람도 적지 않을 것입니다.

이 기사에서는 Invalid hook call warning과 잘 어울리는 "일부 규칙"을 가르칩니다.

※ 원인은, 이쪽을 읽어 주세요

Yarn 사용

"다양한 React가 섞여있다"는 Yarn을 사용하여 해결됩니다.
yarn dedupe 라고 쳐 보세요.

error The dedupe command isn't necessary. `yarn install` will already dedupe.

yarn install 그러면 패키지 중복이 사라지고 Invalid hook call warning 확률이 감소합니다.

yarn workspace 사용

여러 리포지토리를 관리하는 경우 아래와 같이 React가 적용됩니다.

폴더 구성

root
  ├ packageA - React@^16.13.2
  └ packageB - [email protected]

예를 들어, "packageB에서 커스텀 후크를 준비하고 packageA에서 사용하고있다"와 같은 상황입니다.
packageA -> packageB (의존 관계)

이러한 상황에서 Invalid hook call warning은 일어나기 쉽습니다.

이런 경우에는 Yarn Workspace를 사용합시다.

조금 폴더 구성을 변경합시다.

폴더 구성

root
  └ packages
    ├ packageA - React@^16.13.2
    └ packageB - [email protected]

root 의 폴더에 packages 폴더를 만들었습니다.

버전을 정렬합시다.

packageA 와 packageB 의 React 의 버젼은 , 어느 쪽에 가지런히 합시다.

예

cd packages/packageB

yarn upgrade React

yarn workspace를 소개합시다.

root 폴더로 이동합시다.

cd <path to root>

초기화합니다.

yarn init -y

package.json 에 workspaces 를 더합니다.

package.json

{
   ...,
   workspaces: ["packages/*"]
}

＊＊

이제 각 패키지의 node_modules/yarn.lock/package-lock.json을 제거해 봅시다.

＊＊

음, root

yarn

을 실행합니다.

그러면 React가 루트 폴더의 node_modules에 집계되어 Invalid hook call warning 확률이 줄어듭니다.

Gatsby에서의 Invalid hook call warning

Gatsby에서 Invalid hook call warning이 발생하면 다른 원인이 방해를 받을 수 있습니다.

우선

gatsby build

그리고 치자.

그렇게 하면 「진정한 에러」가 나온다고 생각합니다.

이를 검토하고 수정한 다음 다시 gatsby develop로 다시 개발하십시오.

결론

어쩌면 여기까지 해도 일어날 때는 일어날 것입니다만, 다소는 에러로 스택 하는 시간을 줄일 수 있다고 생각합니다.

도움이 되길 바랍니다.