我正在尝试为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
3条答案
按热度按时间67up9zun1#
通过将
@apollo/client
和ts-invariant/process
包含到nuxt构建转译文件中来解决,如下所示:字符串
pftdvrlh2#
我想我已经找到了根本问题。Apollo Client(在2022年初编写时为3.5.10)正在使用
"module":"index.js"
声明ESM导出的路径。然而,基于Webpack 5的捆绑包似乎不支持这一点。在package.json中使用exports
修复了它。你应该支持this feature request。
在此之前,我使用一个小脚本来改变package.json。
pgvzfuti3#
这里没有一个答案对我有用。我还添加了这个
include
。字符串