Failed to resolve import "@vue/apollo-composable

[BorisKamp]

Environment

• Operating System: Darwin
• Node Version: v20.4.0
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: [email protected]
• Builder: -
• User Config: runtimeConfig, devtools, nitro, build, css, modules, components, googleFonts, pwa, i18n, apollo, image
• Runtime Modules: @nuxtjs/[email protected], @kevinmarrec/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @pinia/[email protected]
• Build Modules: -

Describe the bug

I literally have no clue why this jumped in my screen at once. It was working before. I am calling a mutation as follows:

const { mutate: submitForMutation, loading, error } = useMutation<ResponseLogin>(loginMutation)

async function submitForm() {
  const isFormCorrect = await v$.value.$validate()

  if (isFormCorrect) {
    await submitForMutation({
      input: {
        identifier: loginData.value.email,
        password: loginData.value.password,
        provider: 'local',
      },
    })
      .then((response) => {
        onLogin(response?.data?.login.jwt)
        useAuthStore().setUser(response?.data?.login.user)
        useAuthStore().setBearer(response?.data?.login.jwt)
      })
  }
}

In my <script lang="ts" setup>.

It gives me the following error in my console:

Internal server error: Failed to resolve import "@vue/apollo-composable" from "components/forms/FormLogin.vue". Does the file exist?                                                                     8:51:08 PM
  Plugin: vite:import-analysis
  File: /Users/boriskamp/Documents/bk-development/todays-portal-nuxt/components/forms/FormLogin.vue:7:30
  5  |  import { useI18nValidators } from '/Users/boriskamp/Documents/bk-development/todays-portal-nuxt/composables/i18n-validators.ts';
  6  |  import { ref, computed } from 'vue';
  7  |  import { useMutation } from '@vue/apollo-composable';
     |                               ^
  8  |  /* Injection by vite-plugin-vue-inspector Start */
  9  |  import { createVNode as __createVNode,createElementVNode as __createElementVNode,createElementBlock as __createElementBlock } from 'vue'
      at formatError (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46)
      at TransformContext.error (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19)
      at normalizeUrl (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41844:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41998:47
      at async Promise.all (index 6)
      at async TransformContext.transform (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41914:13)
      at async file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite-plugin-inspect/dist/index.mjs:922:19
      at async Object.transform (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30)
      at async loadAndTransform (file:///Users/boriskamp/Documents/bk-development/todays-portal-nuxt/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29) (x3)

Expected behaviour

To just work like it did before....

Reproduction

No response

Additional context

No response

Logs

No response

[pat-flew]

Same issue here, as soon as I make reference to the useMutation, useSubscription, or useQuery composables.

useAsyncQuery and useLazyAsyncQuery composables do not do this.

Since it seems to be an issue with the auto import, any reference is enough to make it bail like this for me.

<script setup lang="ts">
useMutation;
</script>
<template></template>

ERROR  Internal server error: Failed to resolve import "@vue/apollo-composable" from "pages/centres/[id]/edit.vue". Does the file exist?
  Plugin: vite:import-analysis
  10 |  import { gql } from 'graphql-tag';
  11 |  import { useAsyncQuery } from '/Volumes/(snip)/nuxt-test/node_modules/@nuxtjs/apollo/dist/runtime/composables';
  12 |  import { useMutation } from '@vue/apollo-composable';
     |                               ^
  13 |  /* Injection by vite-plugin-vue-inspector Start */
  14 |  import { createVNode as __createVNode,createElementVNode as __createElementVNode,createElementBlock as __createElementBlock } from 'vue'

  12   │   "devDependencies": {
  13   │     "@nuxt/devtools": "^1.0.0-beta.2",
  14   │     "@nuxtjs/apollo": "^5.0.0-alpha.7",
  15   │     "nuxt": "^3.7.4",
  16   │     "vue": "^3.3.4",
  17   │     "vue-router": "^4.2.5"
  18   │   },

[pat-flew]

I could get past this by installing "@vue/apollo-composable" manually, but hitting other issues also mentioned in #550.

[BorisKamp]

I got rid of this package and moved to https://github.com/Diizzayy/nuxt-graphql-client

And I must say it was very easy to setup and use, wish I found this earlier.

[PierreCavalet]

@pat-flew did you find a solution for this ?

[pat-flew]

Hopefully; the later suggestion in #550 (comment) has been working for me so far @PierreCavalet

[Jan-Heussner]

@BorisKamp: I tried the same and then i was realizing that the nuxt-graphql-client(https://github.com/jasonkuhrt/graphql-request#why-was-the-file-upload-feature-taken-away-will-it-return) removed the support of file uploads :( And now i am stucked :D How did u solve this? Or do u have no need of file uploads?