vue.js Apollo客户端“未找到命名的导出'remove'”

ukqbszuj  于 2023-08-07  发布在  Vue.js
关注(0)|答案(3)|浏览(134)

我正在尝试为Nuxt 3应用程序创建apollo client插件。它当前抛出了一个名为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社区模块,但它目前是关于nuxt 3端口的afk,所以它是一个插件。
以下是我的插件所依赖的一些文档:
https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3
https://v3.nuxtjs.org/docs/directory-structure/plugins

67up9zun

67up9zun1#

通过将@apollo/clientts-invariant/process包含到nuxt构建转译文件中来解决,如下所示:

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

字符串

pftdvrlh

pftdvrlh2#

我想我已经找到了根本问题。Apollo Client(在2022年初编写时为3.5.10)正在使用"module":"index.js"声明ESM导出的路径。然而,基于Webpack 5的捆绑包似乎不支持这一点。在package.json中使用exports修复了它。
你应该支持this feature request
在此之前,我使用一个小脚本来改变package.json。

pgvzfuti

pgvzfuti3#

这里没有一个答案对我有用。我还添加了这个include

{
    test: /\.m?js$/,
    resolve: {
      fullySpecified: false,
    },
    include: [
      'graphql',
    ].map((name) => new RegExp(`node_modules/${name}`)),
  },

字符串

相关问题