Получение ошибки при использовании FormattedMessage внутри модуля: Ошибка: [React Intl] Не удалось найти требуемый объект `intl`

Question

У меня есть монорепозиторий, который предоставляет модуль TypeScript, который потребляется и используется проектом React TypeScript.

Когда модуль вставляет произвольные элементы React в виртуальную DOM - все работает, как ожидалось, в том числе когда я попробуйте использовать React Router (что изначально было проблемой c, но я смог это исправить).

Однако, когда я пытаюсь использовать response-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, но я понятия не имею, как это решить, и я потратил довольно много времени, пробуя все, что мог придумать.

Для чего это стоит, вот что я использую:

• TypeScript - как для модуля, так и для проекта
• Webpack для упаковки м odule, где я объявил React, ReactDOM и response-intl как externals и добавил их как peerDependencies, а не как прямые зависимости
• create-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

У кого-нибудь есть идеи? Заранее спасибо!

Answer 1

С указанным выше способом, чтобы заставить его работать, вам нужно удалить node_modules в своем repro-lib каталоге, потому что он установит зависимости в обоих каталогах.

Итак, чтобы решить проблему monorepo, я хотел бы предложить вам использовать функциональные возможности рабочего пространства yarn, как подробно описано здесь: https://classic.yarnpkg.com/en/docs/workspaces/

Подводя итог, это отличная функциональность, помогающая работать с несколькими рабочих пространств всего за yarn install один раз.

Вот несколько шагов, чтобы заставить ваше репо работать:

• Поместите package.json на уровень root проекта со следующими content:

{
  "private": true,
  "workspaces": ["project", "repro-lib"]
}

• Go to project dir и замените следующую строку в package.json:

"pf-common": "file:../repro-lib"

на

"pf-common": "1.0.0" 

• Наконец, просто go вернитесь к root установкам верхнего уровня снова:

yarn install

Вот и все! Теперь вы можете повторно запустить свое приложение, чтобы увидеть, как оно работает.

ПРИМЕЧАНИЕ: с точки зрения интереса к монорепозиториям lerna также может помочь, предоставляя отличный интерфейс командной строки.