Getting error when using FormattedMessage inside a module: Error: [React Intl] Could not find required `intl` object

Question

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

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

但是，当我尝试通过 FormattedMessage 使用 react-intl 时，出现错误：

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）。

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

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

TypeScript - 适用于模块和项目
Webpack 来打包模块，我在其中将 React、ReactDOM 和 react-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

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

因此，为了解决 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

就是这样！现在您可以 re-run 您的应用程序，看看它是如何工作的。

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

Getting error when using FormattedMessage inside a module: Error: [React Intl] Could not find required `intl` object

Getting error when using FormattedMessage inside a module: Error: [React Intl] Could not find required `intl` object

reactjs

typescript

webpack

tsconfig

react-intl