未找到名为EXPORT的Apollo客户端&Remove&qot;

原学程将引见未找到名为EXPORT的Apollo客户端&Remove&qot;的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

未找到名为EXPORT的Apollo客户端&Remove&qot; 教程 第1张

成绩描写

我正在测验考试为Nuxt 三运用法式创立apollo client插件。它以后扔出1个有闭名为ts-invariant的包的毛病:

file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:一
import { remove } from "ts-invariant/process/index.js";
^^^^^^
SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a Co妹妹onJS module, which may not support all module.exports as named exports.
Co妹妹onJS 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:一二四:二一)
 at async ModuleJob.run (node:internal/modules/esm/module_job:一8一:五)
 at async Promise.all (index 0)
 at async ESMLoader.import (node:internal/modules/esm/loader:二8一:二四)
 at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:四五五0:三)
[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
  at file://./.nuxt/dist/server/server.mjs:三一七0:二8九  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:四五五0:三)

我认为我对于此毛病有足够的懂得,晓得它与Nuxt 三处置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社区模块,但是它今朝是闭于nuxt 三端心的AFK,所以它是1个插件。

以下是我的插件依附的1些文档:
https://v四.apollo.vuejs.org/guide-composable/setup.html#vue⑶
https://v三.nuxtjs.org/docs/directory-structure/plugins

推举谜底

经由过程将@apollo/client以及ts-invariant/process包括到nuxt建立传输文件中去处理:

  // nuxt.config.js
  // ...
  build: {
 postcss: {
postcssOptions: require('./postcss.config.js')
 },
 transpile: [
'@apollo/client',
'ts-invariant/process',
 ],
  },
  // ...

佳了闭于未找到名为EXPORT的Apollo客户端&Remove&qot;的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。