React TypeScript 프로젝트에서 사용하고 사용하는 TypeScript 모듈을 노출하는 monorepo가 있습니다.
모듈이 임의의 React 요소를 가상 DOM에 삽입하면 React Router를 사용하려고 할 때를 포함하여 모든 것이 예상대로 작동합니다 (처음에는 문제가 있었지만 수정할 수있었습니다).
그러나을 통해 react-intl을 사용하려고 FormattedMessage하면 오류가 발생합니다.
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
콘솔 로그에 인쇄 된 것을 볼 때 특히 짜증납니다.
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
( IntlProvider랩핑에 유의하십시오 Loading- FormattedMessage찾을 수없는 요소를 사용합니다 IntlProvider).
나는 이것이 어떻게 든 버전 관리와 관련이 있다고 생각하거나 React / React DOM / IntlProvider의 2 개의 인스턴스를 가지고 있다고 생각하지만 어떻게 해결하는지 모르겠고 생각할 수있는 모든 것을 시도하는 데 많은 시간을 보냈습니다.
그만한 가치는 다음과 같습니다.
externals추가했습니다.peerDependenciescreate-react-app 프로젝트를 위해최소 재현 저장소를 만들 수있었습니다. 문제를 재현하는 방법은 다음과 같습니다.
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
누구나 아이디어가 있습니까? 미리 감사드립니다!
위의 방법으로 작동하려면 디렉토리 node_modules에서 삭제 repro-lib해야 두 디렉토리에 종속성이 설치됩니다.
따라서의 문제를 해결하기 위해 https://classic.yarnpkg.com/en/docs/workspaces/에 자세히 설명 된대로의 작업 공간 기능 monorepo을 사용하는 것이 좋습니다 yarn.
요약하면 yarn install한 번만 여러 작업 영역에서 작업하는 데 도움이되는 훌륭한 기능 입니다.
저장소를 작동시키는 몇 가지 단계는 다음과 같습니다.
package.json다음과 같은 내용으로 프로젝트의 루트 레벨에 :{
"private": true,
"workspaces": ["project", "repro-lib"]
}
projectdir로 이동하여 다음 줄 을 바꿉니다 package.json."pf-common": "file:../repro-lib"
...에
"pf-common": "1.0.0"
yarn install
그게 다야! 이제 애플리케이션을 다시 실행하여 작동 방식을 확인할 수 있습니다.
참고 : monorepo에 관심이 있다는 점 lerna에서도 훌륭한 CLI를 제공하여 도움이되는 훌륭한 도구입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다