React 未捕获的不变违规:在 ApolloConsumer 的上下文中找不到“客户端”。将根组件包装在

2024-05-01

我有一个使用 React 应用程序react-apollo:2.5.8以及我通过 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>.`

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

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

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


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 未捕获的不变违规:在 ApolloConsumer 的上下文中找不到“客户端”。将根组件包装在 中 的相关文章

  • 如何在 Gatsby 页面上包含本地 JavaScript?

    我是一个完全的 React 新手 我想这里有些基本的东西我不太明白 默认的 Gatsby 页面如下所示 有没有办法像这样使用本地 js 文件 我想要实现的是让反应忽略script js但仍然让客户端使用它 默认的 Gatsby 页面看起来像
  • 如何使用 Coffeescript 在 React 中渲染 HTML 标签?

    我目前正在学习 ReactJS 以及如何使用 Ruby on Rails 作为其后端 所以如果我做出愚蠢的假设 我深表歉意 请随意责骂我 我正在关注一个教程 其中作者使用 Coffeescript 而不是 ES6 来处理他的 ReactJS
  • Firestore 查询 .toUpperCase() 不起作用

    我正在尝试创建一个网站 使用户能够搜索 Firebase Firestore 中的文档集合 该过程涉及将用户的输入保存为状态 useState 并利用 useEffect 挂钩来查询 Firebase 数据库 但是 我遇到了一个问题 即使用
  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作?

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 在 React 中将模板分离到外部文件

    我正在为客户开发 ReactJS 应用程序 我希望客户端能够自定义应用程序中的一些配置和模板 所以我创建了一个config js file window APP CONFIG url example com template item di
  • 如何在reactjs中禁用未来日期?

    我没有使用任何日期选择器 代码仍然工作正常 到目前为止 我已经选择了输入类型 一切正常 现在我想禁用未来的日期 我怎么做 div div
  • 没有 Props 的 TypeScript React State

    我想利用 TypeScript 中的静态和强类型 但仅限于状态 因为我不打算采用任何道具 当我尝试传递接口时 最终出现错误 import as React from react import Link from react router d
  • 使用 React.js + Express.js 发送电子邮件

    我在 ES6 中使用 React js 构建了一个 Web 应用程序 我目前想要创建一个基本的 联系我们 页面并想要发送电子邮件 我是 React 新手 刚刚发现我实际上无法使用 React 本身发送电子邮件 我正在遵循教程nodemail
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • React Native:加载图像后应用程序性能不佳

    加载图像似乎没有问题 但是加载完毕后就出现问题了 在我的应用程序中 我在整个游戏中一张一张地加载卡片图像 一旦我加载了 40 张卡片图像 整个应用程序就会变得很慢 它总是发生在第 40 个图像处 当我在第 40 个图像之后继续加载更多卡片图
  • 使用 Flask/WTForms 和 React 进行 CSRF 保护

    有没有人成功地为使用 React 作为受控组件 提交到 Flask 后端 最好使用 WTForms 的表单实现了 CSRF 保护 我看过很多部分答案 其中一个是关于 Django 的 但找不到任何关于 Flask 的明确答案 我的大问题似乎
  • 如何正确更新反应钩子状态内的数组

    我一直在尝试更新代表反应状态的数组内的对象 当输入的值更改时应该更新该对象 我可以自己找到一种方法来更新它 但我不太确定这是正确的方法 因为当我打开反应开发工具并转到组件选项卡并单击我正在处理的组件时 在输入输入时状态不会立即更新 并且为了
  • React Context 的范围是什么?

    我不清楚在哪里Context可以在 React 应用程序中创建 我可以在组件树中的任何位置创建上下文吗 如果可以 该上下文的范围是否仅限于创建它的子级 或者 Context 本质上是全局的 我可以在文档中的哪里找到这个 案例 我在页面上多次
  • 仅显示某些路由的组件 - React

    我正在 React 中开发一个带有登录界面的网站 该网站显示一个自定义导航组件 但是我不希望它显示在主路线 即登录页面 上 但据我了解 静态组件不会在路线更改时重新呈现 这准确吗 我正在使用 React Router 来处理所有路由 这是我
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只

随机推荐