Nuxt•3mo ago

Auto imports stopped working for components.

Been working on this code base for couple months now and suddenly today when I came on I noticed auto imports in <template> wasn't working. Usually restarting editor, or rm -rf node_modules .nuxt does the trick but this didn't work. I'm upgraded to the most recent version of nuxt. And typescript works fine in the <script lang="ts" setup> section.

3 Replies

kapa.ai•3mo ago

Hi @dev-mantas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If auto-imports for components in your <template> have suddenly stopped working, but TypeScript auto-imports in <script setup lang="ts"> are still functioning, here are some Nuxt-specific troubleshooting steps and considerations based on the documentation: 1. Check Nuxt Version and Configuration
- Ensure you haven't accidentally disabled component auto-imports in your nuxt.config.ts. If you set components.dirs to an empty array, auto-importing from ~/components will be disabled:

     export default defineNuxtConfig({
       components: {
         dirs: []
       }
     })

     export default defineNuxtConfig({
       components: {
         dirs: []
       }
     })

Make sure this is not the case unless you intend to disable auto-imports for components Auto-imported Components. 2. Explicit Imports as a Workaround
- You can always explicitly import components from #components if auto-imports are not working:

     import { MyComponent } from '#components'

     import { MyComponent } from '#components'

But this should not be necessary if auto-imports are functioning correctly Direct Imports. 3. Check for Breaking Changes or Bugs
- If you recently upgraded Nuxt, there may be a regression or breaking change. Review the release notes for your Nuxt version. - There have been issues reported where auto-imports fail due to specific build configurations (e.g., enabling vite.esbuild.minifyWhitespace in dev mode can break auto-imports for components) [Bug] AutoImport Fails for Components with vite.esbuild.minifyWhitespace=true in Dev Mode. If you have this setting enabled, try disabling it:

     export default defineNuxtConfig({
       vite: {
         esbuild: {
           minifyWhitespace: false
         }
       }
     })

     export default defineNuxtConfig({
       vite: {
         esbuild: {
           minifyWhitespace: false
         }
       }
     })

4. Rebuild and Clear Cache
- You already tried rm -rf node_modules .nuxt, which is the recommended way to clear caches. Also, ensure you restart your development server after making config changes. 5. Check Directory Structure
- Make sure your components are still in the correct components/ directory and that the directory structure hasn't changed. Nuxt auto-imports components from this directory by default Directory-based Auto-imports. 6. IDE Issues
- Sometimes, the IDE may not pick up changes immediately. Try restarting your IDE or invalidating its cache. If none of these steps resolve the issue, and you have confirmed your configuration matches the documentation, it may be a bug introduced in the latest Nuxt release. In that case, consider reporting it or checking for similar issues on the Nuxt GitHub repository. Let me know if you need more targeted help with your nuxt.config.ts or specific error messages! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

dev-mantasOP•3mo ago

I'm using future: {compabilityVersion: 4}, So my components are located in app/components which has been working fine I tried all the solutions you proposed but nothing worked I even change back to branch that hasn't been updated in over a week I have feeling its my editor? but when I use another codebase it works fine. Alright I kinda figured it out. It was my first time upgrading nuxt so I upgraded all the packages with pnpm update or something similar. Something in that process broke it. I revereted everythign to old version reupgraded nuxt and nuxt ui and now auto imports work again.

Gaming

Programming

Auto imports stopped working for components.

Did you find this page helpful?