Apollo Client “Named export ‘remove’ not found” could be translated to Spanish as: Apollo Client: “No se encontró la exportación con nombre ‘remove'”
Estoy intentando crear un complemento de apollo client para una aplicación de Nuxt 3. Actualmente está arrojando un error relacionado con un paquete llamado ts-invariant:
file:///Users/[mi nombre]/Repositories/[proyecto]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
import { remove } from "ts-invariant/process/index.js";
^^^^^^
SyntaxError: La exportación con nombre 'remove' no se encontró. El módulo solicitado 'ts-invariant/process/index.js' es un módulo CommonJS, que puede que no admita todas las exportaciones con nombre.
Los módulos CommonJS siempre se pueden importar a través de la exportación por defecto, por ejemplo usando:
<p>import pkg from 'ts-invariant/process/index.js';
const { remove } = pkg;</p>
<pre><code>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/[mi nombre]/Repositories/[proyecto]/.nuxt/dist/server/server.mjs:4550:3)
</code></pre>
<p>[vite dev] Error al cargar externamente "/Users/[mi nombre]/Repositories/[proyecto]/node_modules/@apollo/client/core/index.js".
at file://./.nuxt/dist/server/server.mjs:3170:289<br>
at async <strong>instantiateModule</strong> (file://./.nuxt/dist/server/server.mjs:4550:3)
```</p>
<strong>Siento que sé lo suficiente sobre este error como para saber que tiene algo que ver con cómo Nuxt 3 maneja los ESM, pero no puedo estar seguro.</strong>
Aquí está el complemento de Nuxt: <br />
<code>plugins/apollo-client.js</code>
```js
import { defineNuxtPlugin } from "#app"
import { ApolloClient, InMemoryCache } from "@apollo/client/core"
import { DefaultApolloClient } from "@vue/apollo-composable"</p>
<p>export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig()
const apolloClient = new ApolloClient({
uri: config.PUBLIC<em>API</em>ENDPOINT,
cache: new InMemoryCache(),
})
nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})
En un escenario normal, podría utilizar el módulo comunitario nuxt-apollo, pero actualmente está inactivo en cuanto a una versión para nuxt 3, así que utilizaré un complemento.
Aquí hay documentación en la que me basé para mi complemento:
https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3
https://v3.nuxtjs.org/docs/directory-structure/plugins
davy.ai
El mensaje de error sugiere que el problema reside en
ts-invariant, específicamente que puede que no admita todos losmodule.exportscomo exportaciones nombradas. También proporciona una posible solución de importar el módulo a través de la exportación predeterminada en su lugar.Es posible que este error esté relacionado con el manejo de ESM (módulos ECMAScript) de Nuxt 3, pero es difícil afirmarlo sin más información.
El código proporcionado es un complemento de
Nuxt 3que crea unapolloClienty lo proporciona a la aplicación Vue 3 utilizando la claveDefaultApolloClient. El complemento importaApolloClientyInMemoryCachede@apollo/client/core, yDefaultApolloClientde@vue/apollo-composable. La funciónuseRuntimeConfig()no se proporciona en el fragmento de código, por lo que no está claro de dónde proviene.El propósito del complemento parece ser habilitar el uso de consultas/mutaciones de GraphQL en la aplicación Vue 3 utilizando Apollo como cliente.