NPM-Linked 라이브러리를 사용하여 “Invalid Hook Call” 오류 문제 해결

npm-link 라이브러리에서 올바르지 않은 훅 호출 오류

React 애플리케이션에서 링크된 패키지를 사용할 때 “Invalid hook call” 오류가 발생하면 혼란스러울 수 있습니다. 이 문제는 React의 여러 인스턴스가 프로젝트에 존재하는 경우에 종종 발생합니다. 이 블로그 포스트에서는 이 오류의 가능한 원인과 해결 방법을 탐색하고 해결하는 데 도움이 되는 솔루션을 제공합니다.

문제: 여러 개의 React 인스턴스

“Invalid hook call” 오류가 발생하는 일반적인 원인 중 하나는 프로젝트에서 React 라이브러리의 여러 인스턴스를 포함하고 있는 것입니다. 이러한 상황은 npm link 또는 유사한 방법을 사용하여 자체 라이브러리를 링크하는 경우에 자주 발생합니다.

라이브러리 폴더에서 다음 명령어를 실행하면 npm link ../sandbox/node_modules/react 은 애플리케이션에서 React의 사본을 사용해야 합니다. 그러나 일부 경우에는 이 링크가 올바르게 설정되지 않을 수 있으며 번들러는 애플리케이션 폴더와 라이브러리 폴더에서 각각 서로 다른 React 인스턴스를 “보게” 될 수 있습니다.

솔루션 1: React를 Peer Dependencies로 이동

이 문제의 일반적인 해결 방법은 React를 라이브러리의 package.json 파일에서 dependencies 대신 peerDependencies 로 이동하는 것입니다. 이렇게 함으로써 모듈 번들러에게 React를 포함하지 말고 의존하는 애플리케이션에서 제공되도록 예상하는 것입니다.

React를 peer dependencies로 이동하려면 package.json에서 다음 변경 사항을 수행하십시오:

"peerDependencies": {
  "react": "^16.13.1"
}

이 변경 사항을 적용한 후에는 node_modules 디렉토리를 삭제하고 npm install 명령어를 실행하십시오. 이를 통해 React가 종속성에서 중복되지 않고 의존하는 애플리케이션과 올바르게 공유되도록 할 수 있습니다.

솔루션 2: 웹팩 별칭 사용

React를 peer dependencies로 이동시키는 것이 문제를 해결하지 못하는 경우, Webpack 별칭을 사용하여 종속 애플리케이션의 빌드에서 React 종속성을 중복 제거할 수 있습니다. 이 접근 방식은 프로젝트 전체에서 하나의 버전의 React만 사용되도록 보장하는 데 도움이 될 수 있습니다.

링크된 종속성을 사용하는 애플리케이션의 webpack.config.js 파일 내에 다음 별칭을 추가하십시오:

resolve: {
  alias: {
    react: path.resolve(__dirname, '<app_path>/node_modules/react'),
    'react-dom': path.resolve(__dirname, '<app_path>/node_modules/react-dom')
  }
}

<app_path>를 실제 애플리케이션의 경로로 대체하십시오.

솔루션 3: 정리 및 모듈 매핑

이전 솔루션들이 작동하지 않은 경우, 다음 대안적인 접근 방식을 시도해 볼 수 있습니다:

1. node_modules 디렉토리를 삭제하고 npm install --legacy-peer-deps 명령어를 실행하십시오. 이렇게 함으로써 React 및 기타 패키지가 peerDependencies에 포함되지 않도록 할 수 있습니다.
2. 테스트 실행을 가능하게 하기 위해 라이브러리의 “React imports”를 주 앱에 설치된 React로 매핑하기 위해 다음 구성을 라이브러리의 package.json에 추가하십시오:

"moduleNameMapper": {
  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom",
  ...peerDependencies에 있는 기타 패키지들
}
  

3. npm link를 사용하여 라이브러리의 React를 이전에 링크한 경우, npm rm --global react 명령어를 실행하여 해제해야 합니다. 그런 다음 npm link를 사용하여 주 앱에서 패키지를 다시 설치하십시오.

결론

“Invalid hook call” 오류는 귀찮을 수 있지만, 프로젝트에서 여러 개의 React 인스턴스 문제를 해결하여 해결할 수 있습니다. 이 블로그 포스트에서 제공하는 솔루션을 따르고 단일 공유 React 인스턴스를 보장함으로써 링크된 패키지를 React 애플리케이션에서 완벽하게 작동시킬 수 있습니다.

React를 peer dependencies로 이동시키고 필요한 경우 Webpack 별칭을 설정하거나 올바른 종속성 해결을 위해 모듈을 정리하고 매핑하는 것을 잊지 마십시오.

이러한 솔루션을 구현함으로써 React 프로젝트에서 사용자 정의 eformless 라이브러리를 활용하면서 원활한 개발 및 테스트 경험을 얻을 수 있습니다.

참고 자료 : 

reactjs