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>

问题描述

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

I have a React app using react-apollo:2.5.8 and a library of custom components that I install via NPM and use within the app. The library has react-apollo:2.5.8 listed in peer and dev dependencies. Ever since I upgraded react-apollo to 2.5.8 I have been getting this error

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

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

I tried listing React-apollo within externals in the Webpack build for the library as well. This way only one installation is used, within the App. But no luck. Every time I try to import the components I keep getting this error. The components within the app are able to query successfully, it's the library components that throw this error.

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

Any suggestions on how I can fix this? I don't want to upgrade to ^3.0.0 as there are breaking changes and would involve a lot of refactoring. I am server side rendering the app as well, in which case it works perfectly fine, and I don't get this error. It's when I try to run the client only version that this error crops up.

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

Update: I can see that the library components still seem to be using their own react-apollo from it's node_modules folder. The module format is ejs, whereas in the app, the module format is the main option cjs. This is probably causing the error. I'll see if I can prevent the library components from using their own react-apollo package.

推荐答案

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

So I solved this by creating a symlink to the react-apollo package within my App from my library components folder. Since this was mainly a requirement for the dev environment, this seems to fix the problem. Not the best solution, but works for now.

这篇关于React Uncaught Invariant Violation:找不到“客户端"在 ApolloConsumer 的上下文中.将根组件包装在 <ApolloProvider> 中.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！