Failed to resolve import "@vue/apollo-composable"

[Der-Alex]

I created an app with nuxtjs v3 rc-13 and @nuxtjs/apollo@5.0.0-alpha.3 based on a pre defined project that I created with nuxt 3 rc-11. After I installed my dependencies and started npm run dev I got the error, thta @vue/apollo-composable module is missing. That was because I forgot to remove import statements from my old project. After I removed them and cleared the nuxi cache I restarted the app and still got the error [plugin:vite:import-analysis] Failed to resolve import "@vue/apollo-composable" from "pages/[...pages].vue". Does the file exist? I double checked that there is no import on my side. I guess that using useQuery with the nuxt configuration apollo: { autoImports: true } doesn't work correctly. I Checked the dependencies of the @nuxtjs/apollo@5.0.0-alpha.3 module and saw, that it uses @vue/apollo-composable internally, which is present in the modules node_module folder.

After I installed the package @vue/apollo-composable as my dependency, everything seems to work. But I think that's the wrong way. Could you please check this behaviour?

[Der-Alex]

Also: When opening a new issue, I get this message:

IMPORTANT: Please use the following link to create a new issue: https://cmty.app/nuxt/issues/new?repo=apollo-module If your issue was not created using the app above, it will be closed immediately.

This one leads to a suspicous website... Could you please check this as well? :)

[Der-Alex]

I was digging a bit deeper and can say that this happens when using useQuery. useAsyncQuery works fine.

[stygmate]

same here

[stygmate]

When I force add @vue/apollo-composable to my project it work... (npm i --force @vue/apollo-composable)

[Diizzayy]

@Der-Alex @stygmate I've been unable to replicate this both locally as well as on StackBlitz, you can have a look at the basic reproduction here. Any additional information you can provide would be useful

[Der-Alex]

@Diizzayy Not sure what's happening... When I download the project from StackBlitz and install and run it, everything works. When I create a new project with npx nuxi init projectname, npm i, npm i -D @nuxtjs/apollo@next, npm run dev with the same nuxt.config.ts and index.vue, I get the error...

I'm going to dig deeper...

[stygmate]

@Diizzayy same as @Der-Alex ... I'm going crazy... I've made a diff of projects and i can't find what is going on ...

[stygmate]

@Der-Alex i'm going to quit my computer. Can you share your project to @Diizzayy ?

[Der-Alex]

https://stackblitz.com/edit/nuxt-starter-fvrzqo

This project was created with nodejs v18.12.1 and npm v8.19.2. So you will find differences inside the package-lock.json files.

I guess it has something to do with the current npm version. I am using nvm and had node v16.14.2 installed. But nvm also installs npm v8.5.0 wich also seems to cause these problems.

After downgrading to node v15.14.0 (wich uses npm v7.7.6) I can run the project. When you delete my package-lock.json and reinstall the project on StackBlitz (wich uses node v16.14.2 and npm v7.17.0) the project runs fine.

[stygmate]

in a fresh project using latest lts node, the package-lock.json file install apollo-composable in node_modules/@nuxtjs/apollo/node_modules/@vue/apollo-composable , ant it's flagged "dev": true.

while in the repro project of @Diizzayy it's installed in node_modules/@vue/apollo-composable and is not flagged "dev"

[mortensassi]

Having the same problem but only when i make use of useMutation - Node 16/NPM 7 on Nuxt rc12

[ifusiontt]

Also having the same problem using useMutation and useQuery. useAsyncQuery works fine. 1) Apollo - 5.0.0-alpha.5 2) Nuxt - 3.0.0 3) Node - v16.13.0 4) NPM - 8.1.0

If I import the composable manually like below, the error "Failed to resolve import "@vue/apollo-composable"" goes away import { useQuery } from '@nuxtjs/apollo/node_modules/@vue/apollo-composable';

However it presents another error; Uncaught (in promise) Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

[art-boer]

@ifusiontt The manually imported useQuery uses a different instance than the one defined in the module (the one being exposed in #imports). Therefore you would need to provide the apollo client yourself.

For example (plugins/apollo.ts):

import {provideApolloClient} from '@vue/apollo-composable'

export default defineNuxtPlugin(() => {
  provideApolloClient(useApollo().clients.default)
})

You can also use provideApolloClients if you need to use multiple clients.

[ifusiontt]

Hey @art-boer thanks for your help!.
I'm new to Apollo so please bear with me :) I tried to install @vue/apollo-composable and there seems to be a dependency issue.

[ifusiontt]

When I force add @vue/apollo-composable to my project it work... (npm i --force @vue/apollo-composable)

Indeed when I force installed @vue/apollo-composables, I now have access to useQuery.

[jiriferkl]

I am not quite sure how npm dependency resolution works, but I was abble to fix this issue simply by removing package-lock.json and node_modules and then install everything at once with npm install.

I am using

• npm 8.19.3
• node v16.19.0

and my package.json looks like this

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/apollo": "^5.0.0-alpha.5",
    "nuxt": "3.0.0"
  }
}

When I try to install one package after another, the error shows up. I belive it is because how dependecies are set in vue-demi package that is required by apollo-composable. When I install only apollo-composable its dependecy tree looks like this

node@b3415af25c56:/app$ npm list vue
app@ /app
`-- @vue/apollo-composable@4.0.0-beta.1
  +-- vue-demi@0.13.11
  | `-- vue@2.6.14 deduped
  `-- vue@2.6.14

When I install everything at once it looks like this

node@b3415af25c56:/app$ npm list vue
app@ /app
+-- @nuxtjs/apollo@5.0.0-alpha.5
| `-- @vue/apollo-composable@4.0.0-beta.1
|   +-- vue-demi@0.13.11
|   | `-- vue@3.2.45 deduped
|   `-- vue@3.2.45 deduped
`-- nuxt@3.0.0
  +-- @nuxt/vite-builder@3.0.0
  | +-- @vitejs/plugin-vue-jsx@2.1.1
  | | `-- vue@3.2.45 deduped
  | +-- @vitejs/plugin-vue@3.2.0
  | | `-- vue@3.2.45 deduped
  | `-- vue@3.2.45 deduped
  +-- @vueuse/head@1.0.22
  | +-- @unhead/vue@1.0.14
  | | `-- vue@3.2.45 deduped
  | `-- vue@3.2.45 deduped
  +-- vue-router@4.1.6
  | `-- vue@3.2.45 deduped
  `-- vue@3.2.45
    `-- @vue/server-renderer@3.2.45
      `-- vue@3.2.45 deduped

[joshistoast]

Just like @jiriferkl stated, installing everything at once, it magically worked just fine :/

[Clex1o1]

I have got the problem with node 18.8 and npm 8.18. Stackblitz uses node 16 and npm 7. therefore a replication isn't possible using these online tools.

[Dinuz]

This issue is still present using node v18.13.0 and npm v9.4.0 I am with "@nuxtjs/apollo": "^5.0.0-alpha.5" and "nuxt": "^3.1.1"

useQuery has the issue and still it's not solved. useAsyncQuery works fine.

[namvvo]

same here, nothing has fixed this.

[zoedsoupe]

I'm having this same issue! forcing the @vue/apollo-composable installation fixes

[lwpinion]

I am seeing the same issue. We had @vue/apollo-composable installed, then switched to @nuxtjs/apollo. Once I uninstalled the apollo composable, I started seeing this message.

Below are the relevant package versions I'm on:

• node 18.11.18
• npm 9.6.1
• nuxt 3.3.1
• nuxtjs/apollo 5.0.0-alpha.5

Unfortunately, I wasn't able to get it working by simply reinstalling all of my packages at one time. I had to go ahead and install @vue/apollo-composable again and then import provideApolloClient, etc in my apollo.js file as described above by @art-boer.

[Der-Alex]

Today I was fiddling around a bit with the nuxt-modules/apollo code. I cloned it on my local machine and tried to install it with npm install which didn't work. After checking the sources I found that the package seems to get built with pnpm instead of npm. So I installed it with pnpm install and got this:

woot@woot-pc:~/dev/int/nuxt/apollo$ pnpm install
Scope: all 2 workspace projects
Lockfile is up to date, resolution step is skipped
Already up to date
. prepare$ nuxt-module-build --stub && nuxi prepare playground
│ ℹ Stubbing @nuxtjs/apollo
│ Nuxi 3.0.0
│ ✔ Types generated in playground/.nuxt
└─ Done in 2s
Done in 2.7s

I could install it and I could even run the playground and could mutate the todo demo!

So I thought maybe this works with a fresh nuxt install as well.

woot@woot-pc:~/dev/int/nuxt/nptest$ pnpm install --shamefully-hoist
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +631
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/woot/.local/share/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 670, reused 415, downloaded 212, added 631, done
node_modules/.pnpm/esbuild@0.16.17/node_modules/esbuild: Running postinstall script, done in 46ms
node_modules/.pnpm/esbuild@0.17.12/node_modules/esbuild: Running postinstall script, done in 64ms

> @ postinstall /home/woot/dev/int/nuxt/nptest
> nuxt prepare

Nuxi 3.3.1                                                                                                                                                                                               18:39:48
✔ Types generated in .nuxt                                                                                                                                                                               18:39:49

devDependencies:
+ nuxt 3.3.1

The integrity of 3179 files was checked. This might have caused installation to take longer.
Done in 12.2s

woot@woot-pc:~/dev/int/nuxt/nptest$ pnpm install @nuxtjs/apollo@next
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +30
++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/typescript/4.9.5: 11.6 MB/11.6 MB, done
Progress: resolved 700, reused 646, downloaded 11, added 30, done

dependencies:
+ @nuxtjs/apollo 5.0.0-alpha.5

 WARN  Issues with peer dependencies found
.
├─┬ @nuxtjs/apollo 5.0.0-alpha.5
│ └─┬ @vue/apollo-composable 4.0.0-beta.1
│   ├── ✕ missing peer vue@"^2.6.0 || ^3.1.0"
│   ├─┬ ts-essentials 9.3.1
│   │ └── ✕ missing peer typescript@>=4.1.0
│   └─┬ vue-demi 0.13.11
│     └── ✕ missing peer vue@"^3.0.0-0 || ^2.6.0"
└─┬ nuxt 3.3.1
  └─┬ @nuxt/vite-builder 3.3.1
    └─┬ vite-plugin-checker 0.5.6
      └── ✕ missing peer typescript@"*"
Peer dependencies that should be installed:
  typescript@>=4.1.0                                          vue@">=3.0.0-0 <3.0.0 || >=3.1.0 <4.0.0 || >=2.6.0 <3.0.0"  

Done in 6.6s

The installation still complains about missing peers. That also should be fixed! I guess this has something to do with apollo-composable trying to keep giving support for vue 2 and the vue composition api.

BUT! After that installation with pnpm useQuery works fine! So we definitely have different results when using npm and pnpm

@Diizzayy I hope this helps you finding the real issue here.

[lbineau]

Same issue on my end with a fresh install.

[iamandrewluca]

This happens because when installed, @vue/apollo-composable is not located in node_modules Instead is located in node_modules/@nuxtjs/apollo/node_modules You will need to install it in the project and it will move to be directly in node_modules

npm i -D @vue/apollo-composable@latest --force

[Der-Alex]

@iamandrewluca It is a dependency that is needed by the @vue/apollo-composable to work properly. I expect that every dependency that a third party package needs, gets installed directly, so that I can use that package without any issues. And thats the problem here.

Otherwise it should be mentioned in the documentation, that other packages have to be installed to make @vue/apollo-composable work properly.

Also I think npm i -D @vue/apollo-composable@latest --legacy-peer-deps should be used instead of --force

[keithmifsud]

In case it helps anyone. To get useQuery() working which wasn't when I was on Node v16,:

I switched to Node v18, deleted node_modules, and deleted package-lock.json and ran npm install again. Use query is now working.

Now I need to figure out why Apollo dev tools's tab is not working (it wasn't earlier either) and see if this plugin is persisting Apollo cache or not. It doesn't seem to be and thus means that we'll have to use another state management as opposed to Apollo which doesn't make sense.

[namvvo]

I got it working by adding peerDependencies here is my package,json:

"peerDependencies": { "vue": "^3.2.47" }, "devDependencies": { "@nuxtjs/apollo": "^5.0.0-alpha.6", "nuxt": "^3.4.1" }, "dependencies": { "@vue/apollo-composable": "^4.0.0-beta.4" }

[Dinuz]

@keithmifsud this is really weird, because I am running on nde v 18 and honestly useQuery still doesn't work. Can you share your package.json and your nuxt.config.ts?

[namvvo]

try my package.json with node v16.19.1. I haven't tested with higher versions

[keithmifsud]

@keithmifsud this is really weird, because I am running on nde v 18 and honestly useQuery still doesn't work. Can you share your package.json and your nuxt.config.ts?

I had to stop using this module as it doesn't save use cached data :disappointed:

[iamandrewluca]

With Nuxt3, it makes more sense to use API routes to fetch data using GQL.

graph LR;
    a[Nuxt Web]-->b[Nuxt API Routes];
    b[Nuxt API Routes]-->c[Some GQL API];

In this way, your bundle will be even smaller, because you don't have to keep any of GQL Queries in your FE bundle

[Dinuz]

@keithmifsud so you are saying that I cannot build an infinite scroll? I am trying with a loadMore button, but I am unable to even store the previous data in state. The refresh just reload everything with the new parameter, but I am unable to add the new results to the previous fetched ones. So if I need to move through pages, it works, but if instead I want to load the data in chunks it doesn't. I guess this issue is related with cache too?

@iamandrewluca do you mind elaborate more? could you provide an example? Maybe let's say you are querying a blog for posts.

[keithmifsud]

@keithmifsud so you are saying that I cannot build an infinite scroll? I am trying with a loadMore button, but I am unable to even store the previous data in state. The refresh just reload everything with the new parameter, but I am unable to add the new results to the previous fetched ones. So if I need to move through pages, it works, but if instead I want to load the data in chunks it doesn't. I guess this issue is related with cache too?

@iamandrewluca do you mind elaborate more? could you provide an example? Maybe let's say you are querying a blog for posts.

Hi @Dinuz ... I'm just saying that this plugin does not use Apollo cache. In its main composable, it overrides the cache options to network-only. I don't how you're managing to not call the server when you tested pagination, I'm assuming you're using some sort of state management which you're not using in the scroll "load more" function.

[Aietes]

I'm having the same issue as described above, getting an error that @vue/apollo-composableis missing. Deleting node-modulesand lock.json, and running npm install again didn't fix it.

ERROR Failed to resolve import "@vue/apollo-composable" from "components/x.vue". Does the file exist? (x2)

But manually installing via npm i -D @vue/apollo-composable@latest --legacy-peer-deps doesn't fix my problem either, since Apollo stops working with an error:

Unexpected string literal "development". Expected ')' to end a compound expression. in file graphql-tag.js:

// node_modules/graphql/jsutils/instanceOf.mjs
var _globalThis$process;
var instanceOf = (
  /* c8 ignore next 6 */
  // FIXME: https://github.com/graphql/graphql-js/issues/2317
  ((_globalThis$process = globalThis.process) === null || _globalThis$process === void 0 ? void 0 : _globalThis$"development") === "production" ? function instanceOf2(value, constructor) {
    return value in

Please note that everything was working fine, until I touched the package.json to upgrade a seemingly unrelated package, TailwindCSS.

Any other ideas, or suggestion for a real fix?

[scottcarlton]

I'm having this issue as well with "@nuxtjs/apollo": "^5.0.0-alpha.6" and "nuxt": "^3.2.2". Actually useMutation seem completely broken. When using useMutation within <script setup> it causes nuxt to break with Failed to resolve import "@vue/apollo-composable" from "pages/applicants/[id]/[interviewId]/edit.vue". Does the file exist? error. If I install @vue/apollo-composable this fixes the issue, which sort of seems like a hack since is should work like useQuery and useAsyncQuery. As well the const { mutate } = useMutation(MY_MUTATION) and calling mutate(varabiles) cause an error Error: Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.. See issue 535. Any thoughts on this? Pretty frustrating at this point.

[arai03]

Is this problem still unresolved?

[namvvo]

I manually installed all the packages and it worked for me. Not sure about the current conditions as I moved on from vue to other language 😂

https://github.com/nuxt-modules/apollo/issues/444#issuecomment-1510385141

[veerendrapatel]

With following versions - useMutation not working. few days back useAsyncQuery worked fine for mutations as well. As of now its not sending graphql call to server and we dont see any call in network tab. It became blocker for me. node - 18.18.0, npm 9.8.1 "nuxt": "^3.6.2",
"@vue/apollo-composable": "^4.0.0-beta.8",
"@nuxtjs/apollo": "^5.0.0-alpha.6",

[roberto910907]

I'd definitely contribute and open a PR if I had the time, but unfortunately, that's not feasible right now. Opting to move away and install stable packages independently seems like the best choice to avoid potential headaches in the future.

[lumos94]

@Diizzayy I have the same issue. I followed the exact instructions from the website and I am getting the same error. 500 [vite-node] [ERR_LOAD_URL] @vue/apollo-composable