时间戳

首页 > 解决方案 > 在模块内使用 FormattedMessage 时出错：错误：[React Intl] 找不到所需的 `intl` 对象

reactjs - 在模块内使用 FormattedMessage 时出错：错误：[React Intl] 找不到所需的 `intl` 对象

问题描述

我有一个 monorepo，它公开了一个 TypeScript 模块，该模块由 React TypeScript 项目使用和使用。

当模块将任意 React 元素插入到虚拟 DOM 中时 - 一切都按预期工作，包括当我尝试使用 React Router 时（最初是有问题的，但我能够修复它）。

但是，当我尝试使用 react-intl, viaFormattedMessage时，出现错误：

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- 这是使用FormattedMessagewhich can't find的元素IntlProvider）。

我想这与版本控制有关，或者有 2 个 React / React DOM / IntlProvider 实例，但我不知道如何解决这个问题，我花了很多时间尝试我能想到的一切。

对于它的价值，这就是我使用的：

我能够创建一个最小的重现存储库，这是重现我的问题的方法：

<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

有人有什么想法吗？提前致谢！

标签： reactjstypescriptwebpacktsconfigreact-intl

解决方案

使用上述方式以使其工作，您必须node_modules在您的repro-lib目录中删除，因为它将在两个目录中安装依赖项。

因此，为了解决 的问题monorepo，我建议您使用yarn此处仔细描述的工作区功能：https ://classic.yarnpkg.com/en/docs/workspaces/

总而言之，只需yarn install一次即可帮助处理多个工作区，这是一项很棒的功能。

以下是使您的回购工作的几个步骤：

  • 将package.json以下内容放在项目的根级别：
{
  "private": true,
  "workspaces": ["project", "repro-lib"]
}
  • 转到project目录并替换以下行package.json：
"pf-common": "file:../repro-lib"

至

"pf-common": "1.0.0"
  • 最后，再次回到 root 顶层安装 deps：
yarn install

而已！现在您可以重新运行您的应用程序以查看它是如何工作的。

注意：就对 monorepo 感兴趣而言，lerna它也是一个很好的工具，可以通过提供出色的 CLI 来提供帮助。

推荐阅读