React Uncaught Invariant Violation：在 ApolloConsumer 的上下文中找不到“客户端”。将根组件包装在 <ApolloProvider> 中

Posted 2023-03-10

【中文标题】React Uncaught Invariant Violation：在 ApolloConsumer 的上下文中找不到“客户端”。将根组件包装在 <ApolloProvider> 中

【英文标题】：React Uncaught Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>

【发布时间】：2020-03-21 09:44:21

【问题描述】：

我有一个使用 react-apollo:2.5.8 的 React 应用程序和一个我通过 NPM 安装并在应用程序中使用的自定义组件库。该库在对等和开发依赖项中列出了react-apollo:2.5.8。自从我将 react-apollo 升级到 2.5.8 后，我一直收到此错误

`Uncaught Invariant Violation: Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>.`

我也尝试在库的 Webpack 构建中的 externals 中列出 React-apollo。这样，在应用程序中只使用一个安装。但没有运气。每次我尝试导入组件时，我都会收到此错误。应用内的组件能够查询成功，是库组件抛出这个错误。

关于如何解决此问题的任何建议？我不想升级到 ^3.0.0，因为有重大更改并且会涉及大量重构。我也在服务器端渲染应用程序，在这种情况下它工作得很好，而且我没有收到这个错误。当我尝试运行仅客户端版本时，会出现此错误。

更新：我可以看到库组件似乎仍在使用其 node_modules 文件夹中的自己的 react-apollo。模块格式为ejs，而在应用程序中，模块格式是主要选项cjs。这可能是导致错误的原因。我会看看我是否可以阻止库组件使用他们自己的react-apollo 包。

【问题讨论】：

你是从同一个包中导入提供者和你的钩子/组件吗？即只有react-apollo 而不是react-apollo 和@apollo/react-hooks？

是的，只有react-apollo。因为我还在2.5.8，所以我没有使用 Hooks

【参考方案1】：

所以我通过在我的库组件文件夹中创建指向我的应用程序中的react-apollo 包的符号链接来解决这个问题。由于这主要是对开发环境的要求，因此这似乎可以解决问题。不是最好的解决方案，但目前可行。