Estoy intentando crear un complemento de apollo client para una aplicación Nuxt 3 . Actualmente arroja un error con respecto a un paquete llamado 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)Siento que sé lo suficiente sobre este error para saber que tiene algo que ver con la forma en que Nuxt 3 trata con ESM, pero no puedo estar seguro.
Aquí está el complemento 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) }) En un escenario normal, podría usar el módulo de la comunidad nuxt-apollo, pero actualmente no funciona con respecto a un puerto nuxt 3 , por lo que es un complemento.
Aquí hay algo de documentación en la que confié para mi complemento:
https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3
https://v3.nuxtjs.org/docs/directory-structure/plugins
Resuelto al incluir @apollo/client y ts-invariant/process en la transpila de compilación nuxt de esta manera:
// nuxt.config.js // ... build: { postcss: { postcssOptions: require('./postcss.config.js') }, transpile: [ '@apollo/client', 'ts-invariant/process', ], }, // ...Creo que he identificado el problema de fondo. Apollo Client (3.5.10 en el momento de escribir este artículo a principios de 2022) utiliza "module":"index.js" para declarar la ruta de las exportaciones de ESM. Sin embargo, parece que los paquetes basados en Webpack 5 no son compatibles con esto. El uso de exports en el paquete.json lo soluciona para siempre.
Deberías votar a favor de esta solicitud de función .
Y aquí está mi paliativo hasta entonces, usando un pequeño script para modificar el paquete.json .