Nuxt•3d ago

cannot import 'useApollo' composable from another composable

in my nuxt app, i decided to use @nuxtjs/apollo as the apollo client because it sets up things for me. to make usage of it more conveneint, i made a composable useGlobalApollo which exposes the default client.

// composables/useGlobalApollo.ts
export const useGlobalApollo = () => {
    const nuxtApollo = useApollo()

    if (!nuxtApollo.clients?.default) {
        throw new Error('Default apollo client was not found. Initialize it first before using it!')
    }

    return {
        client: (nuxtApollo.clients?.default ?? {}) as typeof nuxtApollo.clients.default,
        helpers: nuxtApollo,
    }
}

// composables/useGlobalApollo.ts
export const useGlobalApollo = () => {
    const nuxtApollo = useApollo()

    if (!nuxtApollo.clients?.default) {
        throw new Error('Default apollo client was not found. Initialize it first before using it!')
    }

    return {
        client: (nuxtApollo.clients?.default ?? {}) as typeof nuxtApollo.clients.default,
        helpers: nuxtApollo,
    }
}

then, i use it in my pinia stores to fetch using graphql. here is an example auth store:

// extensions/users/store.ts (this is how i organize my project, into different modules under the folder extensions)
const apollo = useGlobalApollo()

export const useUsersStore = defineStore('users', {
  /// ...
})

// extensions/users/store.ts (this is how i organize my project, into different modules under the folder extensions)
const apollo = useGlobalApollo()

export const useUsersStore = defineStore('users', {
  /// ...
})

then i just use the users store whenever needed during auth. currenlty im using it in a page for login and default layout.

<script setup lang="ts">
// layouts/default.vue
import { useUsersStore } from '~/extensions/users/store'
const usersStore = useUsersStore()
onMounted(() => {
    usersStore.fetchAuth()
})
</script>

<script setup lang="ts">
// layouts/default.vue
import { useUsersStore } from '~/extensions/users/store'
const usersStore = useUsersStore()
onMounted(() => {
    usersStore.fetchAuth()
})
</script>

17 Replies

kapa.ai•3d ago

Hi @captivator. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

captivatorOP•3d ago

so my problem is that i get this random 500 error:

[plugin:vite:import-analysis] Failed to resolve import "D:/dev/main/convenotes/node_modules/@nuxtjs/apollo/dist/runtime/composables" from "composables/useGlobalApollo.ts". Does the file exist?

D:/dev/main/theproject/composables/useGlobalApollo.ts:1:28

1  |  import { useApollo } from 'D:/dev/main/theproject/node_modules/@nuxtjs/apollo/dist/runtime/composables';
   |                             ^
2  |  export const useGlobalApollo = () => {
3  |    const nuxtApollo = useApollo();

[plugin:vite:import-analysis] Failed to resolve import "D:/dev/main/convenotes/node_modules/@nuxtjs/apollo/dist/runtime/composables" from "composables/useGlobalApollo.ts". Does the file exist?

D:/dev/main/theproject/composables/useGlobalApollo.ts:1:28

1  |  import { useApollo } from 'D:/dev/main/theproject/node_modules/@nuxtjs/apollo/dist/runtime/composables';
   |                             ^
2  |  export const useGlobalApollo = () => {
3  |    const nuxtApollo = useApollo();

the file exists, i checked. i tried importing it manually but it also doesnt resolve. i can import other composables as usual, but not this one. i am stuck with this problem for 2 days now. (i had to split the context behind the problem and the actual post)

kapa.ai•3d ago

---------------------- I see you're having an issue with importing the useApollo composable from another composable in your Nuxt application. This is a common challenge when working with composables in Nuxt. The error you're experiencing is likely related to how Nuxt composables work with the Nuxt context. As explained in the Nuxt documentation, many composables rely on being called in the right context during the component lifecycle:

When you are using the built-in Composition API composables provided by Vue and Nuxt, be aware that many of them rely on being called in the right context.

Nuxt documentation The issue in your code is that you're trying to use the useGlobalApollo composable (which itself uses useApollo) at the top level of your store file, outside of any function:

// This is problematic - calling a composable at the module level
const apollo = useGlobalApollo()

export const useUsersStore = defineStore('users', {
  /// ...
})

// This is problematic - calling a composable at the module level
const apollo = useGlobalApollo()

export const useUsersStore = defineStore('users', {
  /// ...
})

Solution You should move the composable call inside the store's setup function:

// extensions/users/store.ts
export const useUsersStore = defineStore('users', () => {
  // Call the composable inside the setup function
  const apollo = useGlobalApollo()
  
  // Rest of your store logic
  // ...
  
  return {
    // Your state and methods
  }
})

// extensions/users/store.ts
export const useUsersStore = defineStore('users', () => {
  // Call the composable inside the setup function
  const apollo = useGlobalApollo()
  
  // Rest of your store logic
  // ...
  
  return {
    // Your state and methods
  }
})

If you're using the options API for your store, you can use the actions property:

export const useUsersStore = defineStore('users', {
  state: () => ({
    // your state
  }),
  actions: {
    fetchAuth() {
      const apollo = useGlobalApollo()
      // Use apollo here
    }
  }
})

export const useUsersStore = defineStore('users', {
  state: () => ({
    // your state
  }),
  actions: {
    fetchAuth() {
      const apollo = useGlobalApollo()
      // Use apollo here
    }
  }
})

This approach ensures that the composable is called within the proper context during the component lifecycle. The Nuxt documentation specifically warns about this issue:

You cannot use them outside a Nuxt plugin, Nuxt route middleware or Vue setup function. On top of that, you must use them synchronously.

Nuxt documentation If you need to maintain a singleton instance, you might consider using a Nuxt plugin instead, as shown in this Stack Overflow answer:

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Initialize your API here
  
  // Expose to useNuxtApp()
  return {
    provide: {
      yourApi: yourApiInstance
    }
  }
})

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Initialize your API here
  
  // Expose to useNuxtApp()
  return {
    provide: {
      yourApi: yourApiInstance
    }
  }
})

Then you can access it in your composable using useNuxtApp().$yourApi. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@739834419598065694> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

captivatorOP•3d ago

@kapa.ai so my problem is that i get this random 500 error:

[plugin:vite:import-analysis] Failed to resolve import "D:/dev/main/convenotes/node_modules/@nuxtjs/apollo/dist/runtime/composables" from "composables/useGlobalApollo.ts". Does the file exist?

D:/dev/main/theproject/composables/useGlobalApollo.ts:1:28

1  |  import { useApollo } from 'D:/dev/main/theproject/node_modules/@nuxtjs/apollo/dist/runtime/composables';
   |                             ^
2  |  export const useGlobalApollo = () => {
3  |    const nuxtApollo = useApollo();

[plugin:vite:import-analysis] Failed to resolve import "D:/dev/main/convenotes/node_modules/@nuxtjs/apollo/dist/runtime/composables" from "composables/useGlobalApollo.ts". Does the file exist?

D:/dev/main/theproject/composables/useGlobalApollo.ts:1:28

1  |  import { useApollo } from 'D:/dev/main/theproject/node_modules/@nuxtjs/apollo/dist/runtime/composables';
   |                             ^
2  |  export const useGlobalApollo = () => {
3  |    const nuxtApollo = useApollo();

the file exists, i checked. i tried importing it manually but it also doesnt resolve. i can import other composables as usual, but not this one. i am stuck with this problem for 2 days now.

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're facing an issue with importing the useApollo composable from the @nuxtjs/apollo module. This appears to be related to how Nuxt handles auto-imports and module resolution. The error you're seeing suggests that Vite is trying to resolve the import using an absolute file path rather than through the module's proper export mechanism. This is not how Nuxt's auto-imports are meant to work. Possible solutions: 1. Use the auto-imported composable directly Since you're using @nuxtjs/apollo, the useApollo composable should be auto-imported by the module. Try removing the explicit import and just use it directly:

// composables/useGlobalApollo.ts
export const useGlobalApollo = () => {
  const nuxtApollo = useApollo()
  
  if (!nuxtApollo.clients?.default) {
    throw new Error('Default apollo client was not found. Initialize it first before using it!')
  }
  
  return {
    client: (nuxtApollo.clients?.default ?? {}) as typeof nuxtApollo.clients.default,
    helpers: nuxtApollo,
  }
}

// composables/useGlobalApollo.ts
export const useGlobalApollo = () => {
  const nuxtApollo = useApollo()
  
  if (!nuxtApollo.clients?.default) {
    throw new Error('Default apollo client was not found. Initialize it first before using it!')
  }
  
  return {
    client: (nuxtApollo.clients?.default ?? {}) as typeof nuxtApollo.clients.default,
    helpers: nuxtApollo,
  }
}

2. Use the #imports alias If you need to make the import explicit, use the #imports alias which Nuxt provides for all auto-imports:

import { useApollo } from '#imports'

import { useApollo } from '#imports'

As mentioned in the Nuxt documentation:

Nuxt exposes every auto-import with the #imports alias that can be used to make the import explicit if needed.

Auto-imports documentation 3. Check module configuration Make sure the Apollo module is properly configured in your nuxt.config.ts file. The module should be setting up its auto-imports correctly. 4. Check for third-party package auto-imports If the above solutions don't work, you might need to explicitly configure auto-imports for the Apollo module. You can do this in your nuxt.config.ts:

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: '@nuxtjs/apollo/dist/runtime/composables',
        imports: ['useApollo']
      }
    ]
  }
})

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: '@nuxtjs/apollo/dist/runtime/composables',
        imports: ['useApollo']
      }
    ]
  }
})

As described in the Auto-import from Third-Party Packages documentation. This issue might be related to how Vite resolves imports or a potential bug in the auto-import system. If none of these solutions work, you might want to check if there are any reported issues with the @nuxtjs/apollo module or consider using a different approach to access the Apollo client. Let me know if any of these solutions help resolve your issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@739834419598065694> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

captivatorOP•3d ago

the most puzzling thing about this problem is that its really weird and out of place it just doesnt want to import the composable i tried it in a fresh project and it imported everything fine i reinstalled node_modules freshly and deleted .nuxt, and it didnt help the file is there but it just doesnt get imported

captivatorOP•3d ago

proof of that

captivatorOP•3d ago

i have decided to make a post here because i genuinelly have no idea how to solve this if i dont fix this them im just going to write my own wrapper over apollo client instead of relying on alpha versions of nuxt modules or vue packages @kapa.ai so the "composables.mjs" and "composables.d.ts" exist in the folder, but vite keeps on saying me that "maybe the file doesnt exist"? it just doesnt want to import useApollo from the library, even though its THERE and it finds the path.

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with this import issue. This appears to be related to how Vite resolves modules in Nuxt, particularly with dynamically imported modules. Based on the information in the knowledge sources, there are a few potential causes and solutions for this issue: Possible causes: 1. Chunk loading errors: This could be similar to the issue described in this GitHub issue where Nuxt fails to resolve file paths correctly. 2. Vite import conditions: There was a fix in Nuxt related to Vite import conditions as mentioned in this PR, which resolved issues with import resolution. 3. Path aliases: The error shows an absolute path being used instead of module resolution, which suggests an issue with how the module is being imported. Solutions to try: 1. Use auto-imports instead of direct path Instead of importing directly from the module path, rely on Nuxt's auto-import system:

// Remove this line
// import { useApollo } from 'D:/dev/main/theproject/node_modules/@nuxtjs/apollo/dist/runtime/composables';

// Just use useApollo directly
export const useGlobalApollo = () => {
  const nuxtApollo = useApollo();
  // rest of your code
}

// Remove this line
// import { useApollo } from 'D:/dev/main/theproject/node_modules/@nuxtjs/apollo/dist/runtime/composables';

// Just use useApollo directly
export const useGlobalApollo = () => {
  const nuxtApollo = useApollo();
  // rest of your code
}

2. Configure explicit imports in nuxt.config.ts You can explicitly tell Nuxt to import from the Apollo module:

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: '@nuxtjs/apollo',
        imports: ['useApollo']
      }
    ]
  }
})

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: '@nuxtjs/apollo',
        imports: ['useApollo']
      }
    ]
  }
})

As shown in the Auto-import from Third-Party Packages documentation. 3. Try transpiling the module If the module is having issues with ESM compatibility:

export default defineNuxtConfig({
  build: {
    transpile: ['@nuxtjs/apollo']
  }
})

export default defineNuxtConfig({
  build: {
    transpile: ['@nuxtjs/apollo']
  }
})

4. Check for Nuxt/Apollo version compatibility This could be related to a compatibility issue between Nuxt 3.16.0 and the Apollo module, similar to what was reported with Algolia in this GitHub issue. 5. Use the #imports alias

import { useApollo } from '#imports'

import { useApollo } from '#imports'

If none of these solutions work, it might be worth checking if there's a specific issue with the version of @nuxtjs/apollo you're using, or if there are any reported issues in their GitHub repository. The fact that the file exists but Vite can't resolve it suggests this is more of a module resolution or bundling issue rather than a missing file problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@739834419598065694> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

captivatorOP•3d ago

oh...

captivatorOP•3d ago

oh of course OF COURSE @kapa.ai so the answer was simple: i just didnt include .mjs in vite.resolve i am so angry rn

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration! This is indeed a common issue with Vite and ESM modules in Nuxt. The .mjs extension is crucial for proper ESM resolution. This relates directly to how Nuxt and Vite handle ES Modules. As mentioned in the ES Modules documentation, sometimes you need to manually alias libraries to their correct file paths with extensions. For your case, you needed to specify the .mjs extension when importing from the module. This is a common pattern when working with ES Modules in Node.js environments. You could have resolved this by adding an alias in your nuxt.config.ts:

export default defineNuxtConfig({
  alias: {
    '@nuxtjs/apollo/dist/runtime/composables': '@nuxtjs/apollo/dist/runtime/composables.mjs'
  }
})

export default defineNuxtConfig({
  alias: {
    '@nuxtjs/apollo/dist/runtime/composables': '@nuxtjs/apollo/dist/runtime/composables.mjs'
  }
})

Or by directly importing with the correct extension:

import { useApollo } from '@nuxtjs/apollo/dist/runtime/composables.mjs'

import { useApollo } from '@nuxtjs/apollo/dist/runtime/composables.mjs'

These small details with file extensions can be incredibly frustrating to debug, especially when the error message isn't entirely clear about what's wrong. At least now you know for future reference! I'm glad you found the solution, even if it was a seemingly simple fix after two days of troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@739834419598065694> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

cannot import 'useApollo' composable from another composable

Did you find this page helpful?