Nuxt•2mo ago

"Teleport" is imported from external module "..." but never used in "..."

[1:24:41 PM]  WARN  "Teleport" is imported from external module "file:///home/ubuntu/nuxt-dashboard/node_modules/vue/index.mjs" but never used in "node_modules/@unhead/vue/dist/utils.mjs", "node_modules/@unhead/vue/dist/shared/vue.N9zWjxoK.mjs", "node_modules/@unhead/vue/dist/shared/vue.nvpYXC6D.mjs", "node_modules/@unhead/vue/dist/shared/vue.BYLJNEcq.mjs", "node_modules/@unhead/vue/dist/server.mjs", "node_modules/@vueuse/shared/index.mjs", "node_modules/@vueuse/core/index.mjs" and "node_modules/quasar/dist/quasar.server.prod.js".

[1:24:41 PM]  WARN  "Teleport" is imported from external module "file:///home/ubuntu/nuxt-dashboard/node_modules/vue/index.mjs" but never used in "node_modules/@unhead/vue/dist/utils.mjs", "node_modules/@unhead/vue/dist/shared/vue.N9zWjxoK.mjs", "node_modules/@unhead/vue/dist/shared/vue.nvpYXC6D.mjs", "node_modules/@unhead/vue/dist/shared/vue.BYLJNEcq.mjs", "node_modules/@unhead/vue/dist/server.mjs", "node_modules/@vueuse/shared/index.mjs", "node_modules/@vueuse/core/index.mjs" and "node_modules/quasar/dist/quasar.server.prod.js".

I'm not sure why this error pops up, I checked my dependencies, and how I was using Teleport, it just gets autoimported twice in my app. Is it possible I misconfigured something?

3 Replies

kapa.ai•2mo ago

Hi @Bell. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This warning is related to auto-imports in Nuxt and how the Vue Teleport component is being handled. The warning indicates that the Teleport component is being imported from Vue but not used in several files from the @unhead/vue package and other dependencies. Understanding the Issue This is likely related to how Nuxt handles auto-imports. In Nuxt, components like Teleport are automatically imported and made available throughout your application without requiring explicit imports. However, this can sometimes lead to warnings about unused imports in dependencies. Based on the knowledge sources, there are a few potential causes: 1. Auto-import conflicts: Nuxt is auto-importing Teleport, but it's also being imported elsewhere, creating duplicate imports YouTube [Nuxt 3]: Auto Imports in Vue and Nuxt - The Good and the Bad. 2. Dependency version issues: There might be a version mismatch with the @unhead/vue package. A similar issue was reported with @unhead/vue in Github Issue: Rollup failed to resolve import "@unhead/vue" for nuxt layers parent, where updating to version "@unhead/vue": "^1.11.20" resolved the problem. 3. Vue compiler hints: There was a recent fix in Nuxt to "remove Vue compiler hint from auto import" as mentioned in this PR, which notes that "They are not real imports and will be removed by the Vue compiler." Possible Solutions 1. Check your Teleport usage: Make sure you're using Teleport correctly. Nuxt has specific SSR support for teleports to #teleports only, with client-side support for other targets using a <ClientOnly> wrapper as mentioned in the Teleport documentation. 2. Update dependencies: Ensure you're using the latest version of @unhead/vue and other dependencies. 3. Configure auto-imports: You can customize auto-imports in your nuxt.config.ts file if needed:

export default defineNuxtConfig({
  imports: {
    // Customize auto-imports if needed
  }
})

export default defineNuxtConfig({
  imports: {
    // Customize auto-imports if needed
  }
})

This warning is likely not affecting your application's functionality and might be more of a development-time warning rather than a runtime issue. It's related to how Nuxt's auto-import system interacts with the Vue compiler and your dependencies. If you want to see a practical example of how Teleport works in Nuxt, you can check out the Teleport example in the Nuxt documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

BellOP•5w ago

any ideas?

Gaming

Programming

"Teleport" is imported from external module "..." but never used in "..."

Did you find this page helpful?