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

[Der-Alex]

I created an app with nuxtjs v3 rc-13 and @nuxtjs/[email protected] 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/[email protected] 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"

[mortennh]

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/[email protected]
  +-- [email protected]
  | `-- [email protected] deduped
  `-- [email protected]

When I install everything at once it looks like this

node@b3415af25c56:/app$ npm list vue
app@ /app
+-- @nuxtjs/[email protected]
| `-- @vue/[email protected]
|   +-- [email protected]
|   | `-- [email protected] deduped
|   `-- [email protected] deduped
`-- [email protected]
  +-- @nuxt/[email protected]
  | +-- @vitejs/[email protected]
  | | `-- [email protected] deduped
  | +-- @vitejs/[email protected]
  | | `-- [email protected] deduped
  | `-- [email protected] deduped
  +-- @vueuse/[email protected]
  | +-- @unhead/[email protected]
  | | `-- [email protected] deduped
  | `-- [email protected] deduped
  +-- [email protected]
  | `-- [email protected] deduped
  `-- [email protected]
    `-- @vue/[email protected]
      `-- [email protected] 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 [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: 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/[email protected]/node_modules/esbuild: Running postinstall script, done in 46ms
node_modules/.pnpm/[email protected]/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 [email protected]: Please use @jridgewell/sourcemap-codec instead
 WARN  deprecated [email protected]: 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.

[unrevised6419]

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