Apollo 客户端“未找到命名导出‘删除’”

2024-05-10

我正在尝试创建一个apollo client插件Nuxt 3应用。它当前抛出有关名为的包的错误ts-invariant:

file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
import { remove } from "ts-invariant/process/index.js";
         ^^^^^^
SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'ts-invariant/process/index.js';
const { remove } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:4550:3)
[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
  at file://./.nuxt/dist/server/server.mjs:3170:289  
  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:4550:3)

我觉得我对这个错误有足够的了解,知道它与 Nuxt 3 处理 ESM 的方式有关,但我不能确定。

这是 nuxt 插件:
plugins/apollo-client.js

import { defineNuxtPlugin } from "#app"
import { ApolloClient, InMemoryCache } from "@apollo/client/core"
import { DefaultApolloClient } from "@vue/apollo-composable"

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const apolloClient = new ApolloClient({
    uri: config.PUBLIC_API_ENDPOINT,
    cache: new InMemoryCache(),
  })
  nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})

在正常情况下,我可能会使用 nuxt-apollo 社区模块,但目前它正在AFKnuxt 3端口,所以它是一个插件。

这是我的插件所依赖的一些文档:
https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3 https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3
https://v3.nuxtjs.org/docs/directory-struct/plugins https://v3.nuxtjs.org/docs/directory-structure/plugins


通过包含解决@apollo/client and ts-invariant/process像这样进入 nuxt 构建转换:

  // nuxt.config.js
  // ...
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js')
    },
    transpile: [
      '@apollo/client',
      'ts-invariant/process',
    ],
  },
  // ...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Apollo 客户端“未找到命名导出‘删除’” 的相关文章

  • 无法填充名为“status”的数组

    我正在尝试做一些非常简单的事情 在 Javascript 中初始化一个数组 而且它在 Google Chrome 中不起作用 这是代码 status for i 0 i lt 8 i status i false alert status
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 有没有办法监控页面上运行的 JavaScript 函数?

    有没有办法查看页面上正在执行哪些功能 如果我在页面上加载外部脚本 是否可以动态更改函数的功能或阻止其运行 HTML5 http www w3 org TR html5 scripting 1 html establish script bl
  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定
  • 将数组转换为具有默认值的对象的更简洁方法? (洛达什可用)

    我有一个数组 比如说 a b c 我想将其转换为一个对象 该对象以数组值作为键和我可以设置的默认值 所以如果默认值是true 我希望我的输出是 a true b true c true 下面的代码是否有更简洁的版本来实现此目的 var my
  • jQuery 验证日期范围问题

    我的代码中有很多地方有成对的相关开始和结束日期字段 范围 我需要验证开始日期早于结束日期 我正在使用 jQuery 验证插件 这是我的代码 http jsfiddle net jinglesthula dESz2 http jsfiddle
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • 在 JavaScript 中定位提示弹出窗口

    我有一个如下所示的 JavaScript 提示 我想将提示放在屏幕中心 如何使用 javascript 做到这一点 function showUpdate var x var name prompt Please enter your na
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 哪些网络浏览器不支持 Javascript?以及如何识别客户端使用的是哪个浏览器?

    是否有不支持 javascript 的网络浏览器 以及如何确定客户端是否正在使用这些浏览器之一 或者客户端禁用了javascript 是否有不支持 javascript 的网络浏览器 当然 Lynx http en wikipedia or
  • vue js中的process.env.BASE_URL是什么?

    当我使用 vue cli 安装 vue 时手动选择预设 我偶然发现了 process env BASE URL 我试图在互联网上找到它 但无济于事 我找不到任何像样的解释 这是代码 const router new VueRouter mo
  • 从相机视图中拖动锁定在一定距离/半径处的对象

    我在场景中心有一个相机 距离相机 z 400 处有 1 个球体 其父级位于中心 我想从视图中向上 向下 向左 向右拖动球体 但同时不改变它相对于中心的 z 位置 我最终使用了另一个球体并使其不可见 添加side THREE DoubleSi
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • JavaScript 访问密码字段值是否被视为存在安全风险?

    如果安全 正确地存储密码是良好的风格和安全性 那么对于要求用户输入密码的网页来说不应该也是如此吗 考虑这个例子
  • PhantomJS 网页内存消耗?

    是否有一种编程方式 因为我想在运行时自动执行 方式来查看网页在通过 PhantomJs 运行时使用了多少内存 我也在使用 casperjs 如果这有帮助的话 我已经搜索了很多但没有找到任何方法 PhantomJs 使用 QtWebKit 因
  • 如何在 JavaScript 中对关联数组进行排序?

    我需要为我的一个项目通过 JS 对关联数组进行排序 我发现这个函数在 Firefox 中运行得很好 但不幸的是它在 IE8 OPERA CHROME 中不起作用 无法找到使其在其他浏览器中运行的方法 或者找到另一个适合该目的的函数 我真的很
  • JavaScript 中最长的通用前缀

    我正在尝试解决 Leet Code 挑战14 最长公共前缀 https leetcode com problems longest common prefix 编写一个函数来查找字符串数组中最长的公共前缀字符串 如果没有公共前缀 则返回空字
  • Apollo 客户端延迟刷新

    In Apollo Client v3React 实现 我使用钩子来使用订阅 当我从订阅接收数据时 我想重新获取查询 但前提是查询之前已执行过并且位于缓存中 有办法实现这一点吗 我首先进行惰性查询 然后在收到订阅数据时手动检查缓存 然后尝试

随机推荐

  • 如何跟踪数据库连接泄漏

    我们有一个应用程序似乎存在连接泄漏 SQL Server 表示已达到最大池大小 我独自一人在我的开发机器上 显然 只需导航应用程序 我就会触发此错误 SQL Server 活动监视器显示大量正在使用我的数据库的进程 我想查找哪些文件打开连接
  • Scala repl 抛出错误

    当我打字时scala在终端上启动 repl 它会抛出此错误 scala gt init error error while loading AnnotatedElement class file usr lib jvm java 8 ora
  • Android:如何为我的应用程序播放的任何音乐文件创建淡入/淡出音效?

    我正在开发的应用程序播放音乐文件 如果计时器到期 我希望音乐淡出 我怎么做 我正在使用 MediaPlayer 播放音乐 音乐文件位于我的应用程序的原始文件夹中 这是我的 Android MediaPlayer 的整个处理程序类 查看 pl
  • 具有 MVC4 风格捆绑的 Intellisense

    到目前为止我找不到问题或解决这个问题 我确信我错过了一些简单的事情 我有一个带有一堆缩小的 CSS 的样式包 并且我正在用里面的类来装饰 HTML 元素 一切都运转良好 然而 Intellisense 和 ReSharper 都因为 CSS
  • DRF:以编程方式从 TextChoices 字段获取默认选择

    我们的网站是 Vue 前端 DRF 后端 在一个serializer validate 方法 我需要以编程方式确定哪个选项TextChoices类已被指定为模型字段的默认值 TextChoices 类 缩写示例 class PaymentM
  • Angular 2 变更检测是如何工作的?

    在 Angular 1 中 更改检测是通过对 scope 层次结构进行脏检查来进行的 我们会在模板 控制器或组件中隐式或显式创建观察者 在 Angular 2 中 我们不再有 scope 但我们确实重写了 setInterval setTi
  • VS C# 中的依赖地狱,找不到依赖项

    我创建了一个图表 C 库 我们称之为chartlibrary 它本身依赖于多个第三方 dll 文件 在另一个可执行项目中 我们称之为chartuser 我参考了chartlibrary项目 两个项目位于 Visual Studio 中的同一
  • HTML 文本框,自动突出显示文本

    我将如何制作一个包含预先存在的文本的文本框 当用户在其中单击时 其中的所有文本都会突出显示 例如 YouTube 在其视频上使用嵌入代码的文本框的方式相同 谢谢 如果我正确理解你的问题 你可以使用一些javascript 未经测试的代码
  • 为什么 std::atomic 比 volatile bool 慢很多?

    多年来我一直使用 volatile bool 来控制线程执行 并且效果很好 in my class declaration volatile bool stop In the thread function while stop do th
  • Android 在通话期间播放音频文件[重复]

    这个问题在这里已经有答案了 对于我的 Android 应用程序 我想在从应用程序接听电话后播放音频文件 应用程序将发起电话呼叫 一旦接收者接听电话 应用程序应开始播放录制的音频文件 通过在谷歌上进行大量搜索 我发现这对于未root的设备来说
  • 如何使用 cf 程序查看我的 VCAP_SERVICES 环境变量?

    当我跑步时cf env
  • Zsh 中的鱼式自我暗示?

    有没有办法做到鱼的自我暗示类型 http ridiculousfish com shell images autosuggestion png in Zsh https github com tarruda zsh autosuggesti
  • 春季启动大战

    我倾向于在开发过程中使用可运行的 JAR 但我需要 WAR 来进行部署 我已经关注了this http spring io guides gs convert jar to war 有关从 JAR 转换为 WAR Spring Boot G
  • 如何使用 Javascript 从 Chrome iOS 下载 blob 文件?

    如何使用 Javascript 从 Chrome iOS 下载 blob 文件 我正在从 iOS 下载文件 pdf excel txt png iOS 没有文件系统 这对下载来说是一个问题 我创建了一个代码 根据操作系统和导航器 如果需要
  • 检测 perl 中声明的包变量

    Given package main our f sub f sub g 1 我怎样才能确定 f 但不是 g 已宣布 即兴的 我以为 main g SCALAR 可能是未定义的 但它是一个善意标量参考值 背景 我想将一个变量导入到main
  • Android 中的字符串加密

    我正在使用代码进行加密和加密 它没有给出字符串结果 字节数组未转换为字符串 我几乎尝试了所有方法将字节数组转换为字符 但没有给出结果 public class EncryptionTest extends Activity EditText
  • C++ 更改屏幕方向问题 -- DEVMODE dmDisplayOrientation DMDO_90 undefined

    我似乎无法编译一些 C 代码 我正在翻转显示器的方向 但 VS2008 告诉我 DMDO 90 和 DMDO 270 无法识别 error C2065 DMDO 90 undeclared identifier error C2065 DM
  • 在子管理中显示父字段(list_display)

    这是 models py 的片段 class Applicant models Model name models CharField email models CharField class Application models Mode
  • JSX 中的混合运算符

    我想在 JSX 中使用混合运算符 例如 datas datas map function data i return
  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo