N
Nuxt•2d ago
Necrelox

[unimport] failed to find "LazyIcon" imported from "#components"

Hello ! I'm having an issue when running tests on my Nuxt module. I’ve registered the @nuxt/icon module, but when I run my tests (with vitest), I get the following error: 
Error: [unimport] failed to find "LazyIcon" imported from "#components"
  Plugin: nuxt:components:imports
Error: [unimport] failed to find "LazyIcon" imported from "#components"
  Plugin: nuxt:components:imports
2 Replies
kapa.ai
kapa.ai•2d ago
Hi @Necrelox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're encountering an error with the LazyIcon component from @nuxt/icon when running tests with Vitest. This is related to auto-imports in Nuxt not working correctly during testing. Based on the knowledge sources, there are a few things to consider: 1. The @nuxt/icon module should handle icons automatically as mentioned in the Nuxt UI documentation, but it seems the testing environment isn't properly resolving these imports. 2. For Vitest testing with Nuxt, you need to set up the proper environment. According to the Nuxt testing documentation, you should: - Add @nuxt/test-utils/module to your nuxt.config.ts - Create a proper vitest.config.ts file - Ensure you're using the Nuxt environment for your tests 3. For the specific error with components not being found, you might need to directly import the component instead of relying on auto-imports during tests. Here's what you can try: 1. Make sure your Vitest configuration is properly set up: 
// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt',
    // you can optionally set Nuxt-specific environment options
    environmentOptions: {
      nuxt: {
        // your Nuxt config overrides
      }
    }
  }
})
// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt',
    // you can optionally set Nuxt-specific environment options
    environmentOptions: {
      nuxt: {
        // your Nuxt config overrides
      }
    }
  }
})
2. Ensure you have the proper environment annotation in your test files: 
// @vitest-environment nuxt
import { test } from 'vitest'
// @vitest-environment nuxt
import { test } from 'vitest'
3. For the specific LazyIcon issue, try directly importing the component in your test files: 
import { Icon } from '#components'
// or
import { Icon } from '#build/components'
import { Icon } from '#components'
// or
import { Icon } from '#build/components'
If you're still facing issues, it might be related to how the components are being registered during testing. According to a Stack Overflow post, sometimes removing explicit imports and relying on auto-imports can help with modules like nuxt-svgo, which might also apply to @nuxt/icon. Remember that the Nuxt testing environment needs to properly initialize all the modules and auto-imports, which can sometimes be tricky with third-party modules. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2d ago
<@295266220444352512> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?