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

Der-Alex · 2022-11-07T18:01:05Z

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?

The text was updated successfully, but these errors were encountered:

Der-Alex · 2022-11-07T18:02:41Z

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 · 2022-11-08T15:18:37Z

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

stygmate · 2022-11-09T16:25:50Z

same here

stygmate · 2022-11-10T09:43:54Z

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

Diizzayy · 2022-11-10T12:02:57Z

@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 · 2022-11-10T12:43:42Z

@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 · 2022-11-10T14:06:26Z

@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 · 2022-11-10T14:38:10Z

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

Der-Alex · 2022-11-10T16:00:19Z

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 · 2022-11-11T11:33:11Z

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 · 2022-11-14T07:47:31Z

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

ifusiontt · 2022-12-15T11:04:51Z

Also having the same problem using useMutation and useQuery. useAsyncQuery works fine.

Apollo - 5.0.0-alpha.5
Nuxt - 3.0.0
Node - v16.13.0
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 · 2022-12-16T11:10:01Z

@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 · 2022-12-16T15:33:59Z

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 · 2022-12-29T19:42:34Z

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 · 2022-12-31T14:09:46Z

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 · 2023-01-09T15:52:01Z

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

Clex1o1 · 2023-01-23T15:54:28Z

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 · 2023-02-02T02:07:05Z

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 · 2023-02-28T14:44:38Z

same here, nothing has fixed this.

zoedsoupe · 2023-03-07T14:51:34Z

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

lwpinion · 2023-03-14T22:52:15Z

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 · 2023-03-17T18:09:11Z

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 · 2023-04-02T13:53:33Z

Same issue on my end with a fresh install.

iamandrewluca · 2023-04-09T22:26:32Z

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 · 2023-04-11T04:47:04Z

@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 · 2023-04-12T06:02:43Z

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 · 2023-04-16T13:43:29Z

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 · 2023-05-16T21:36:52Z

@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 · 2023-05-17T03:52:39Z

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

keithmifsud · 2023-05-17T06:21:55Z

@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 😞

iamandrewluca · 2023-05-17T07:18:06Z

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 · 2023-05-17T23:35:55Z

@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 · 2023-05-21T15:16:14Z

@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 · 2023-06-22T16:30:00Z

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 · 2023-08-03T15:14:24Z

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 · 2023-11-13T06:40:48Z

Is this problem still unresolved?

namvvo · 2023-11-13T07:07:30Z

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 😂

#444 (comment)

veerendrapatel · 2023-12-19T05:54:46Z

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 · 2024-01-12T04:45:24Z

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 · 2024-04-30T09:14:23Z

@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

Diizzayy self-assigned this Nov 7, 2022

guendev mentioned this issue Feb 8, 2023

Failed to resolve import "@vue/apollo-composable" from "pages/login.vue". Does the file exist? #477

Closed

zoedsoupe mentioned this issue Mar 9, 2023

Error to resolve ApolloClients #488

Closed

scottcarlton mentioned this issue Aug 3, 2023

useMutation with script setup in Nuxt 3 #535

Closed

Vernando05 mentioned this issue Aug 26, 2023

Resolve @vue/apollo-composable path #545

Open

micchickenburger mentioned this issue Jan 24, 2024

useQuery blocks page load on 4.0.0 vuejs/apollo#1531

Open

Diizzayy mentioned this issue Mar 1, 2024

improvements: enable async query variable reactivity; type hints for Apollo client ids; apollo-composable dependency resolution #597

Merged

Diizzayy closed this as completed in #597 Mar 1, 2024

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

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

Comments

Der-Alex commented Nov 7, 2022

Der-Alex commented Nov 7, 2022

Der-Alex commented Nov 8, 2022

stygmate commented Nov 9, 2022

stygmate commented Nov 10, 2022

Diizzayy commented Nov 10, 2022

Der-Alex commented Nov 10, 2022

stygmate commented Nov 10, 2022

stygmate commented Nov 10, 2022

Der-Alex commented Nov 10, 2022 • edited Loading

stygmate commented Nov 11, 2022

mortensassi commented Nov 14, 2022

ifusiontt commented Dec 15, 2022

art-boer commented Dec 16, 2022 • edited Loading

ifusiontt commented Dec 16, 2022 • edited Loading

ifusiontt commented Dec 29, 2022

jiriferkl commented Dec 31, 2022

joshistoast commented Jan 9, 2023 • edited Loading

Clex1o1 commented Jan 23, 2023

Dinuz commented Feb 2, 2023

namvvo commented Feb 28, 2023

zoedsoupe commented Mar 7, 2023

lwpinion commented Mar 14, 2023

Der-Alex commented Mar 17, 2023

lbineau commented Apr 2, 2023

iamandrewluca commented Apr 9, 2023 • edited Loading

Der-Alex commented Apr 11, 2023 • edited Loading

keithmifsud commented Apr 12, 2023

namvvo commented Apr 16, 2023

Dinuz commented May 16, 2023

namvvo commented May 17, 2023

keithmifsud commented May 17, 2023

iamandrewluca commented May 17, 2023 • edited Loading

Dinuz commented May 17, 2023 • edited Loading

keithmifsud commented May 21, 2023

Aietes commented Jun 22, 2023 • edited Loading

scottcarlton commented Aug 3, 2023 • edited Loading

arai03 commented Nov 13, 2023

namvvo commented Nov 13, 2023

veerendrapatel commented Dec 19, 2023 • edited Loading

roberto910907 commented Jan 12, 2024

lumos94 commented Apr 30, 2024

Der-Alex commented Nov 10, 2022 •

edited

Loading

art-boer commented Dec 16, 2022 •

edited

Loading

ifusiontt commented Dec 16, 2022 •

edited

Loading

joshistoast commented Jan 9, 2023 •

edited

Loading

iamandrewluca commented Apr 9, 2023 •

edited

Loading

Der-Alex commented Apr 11, 2023 •

edited

Loading

iamandrewluca commented May 17, 2023 •

edited

Loading

Dinuz commented May 17, 2023 •

edited

Loading

Aietes commented Jun 22, 2023 •

edited

Loading

scottcarlton commented Aug 3, 2023 •

edited

Loading

veerendrapatel commented Dec 19, 2023 •

edited

Loading