N
Nuxt•2mo ago
matamune

defineLazyHydrationComponent can't import component

this my code 
<template>
  <div>
    <LazyListMovieStyleA />
  </div>
</template>

<script setup>
const LazyListMovieStyleA = defineLazyHydrationComponent('visible', () =>
  import('@/components/page-comp/home/ListMovieStyleA.vue')
)
</script>
<template>
  <div>
    <LazyListMovieStyleA />
  </div>
</template>

<script setup>
const LazyListMovieStyleA = defineLazyHydrationComponent('visible', () =>
  import('@/components/page-comp/home/ListMovieStyleA.vue')
)
</script>
and i make error LazyListMovieStyleA is not defined but I am sure the path is correct
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @matamune. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error LazyListMovieStyleA is not defined suggests that the macro defineLazyHydrationComponent is not available or not recognized in your Nuxt project. According to the knowledge sources, defineLazyHydrationComponent is introduced as a macro to explicitly define lazy hydration strategies for components, but this feature is not part of the stable Nuxt documentation and appears only in a pull request, not in the official released docs or guides. This means it may not be available in your current Nuxt version unless you are using a specific experimental or edge build that includes this macro. If you are using a standard Nuxt 3 release, the officially supported way to use lazy hydration is by using the Lazy prefix and hydration props directly in your template, like so: 
<template>
  <div>
    <LazyListMovieStyleA hydrate-on-visible />
  </div>
</template>
<template>
  <div>
    <LazyListMovieStyleA hydrate-on-visible />
  </div>
</template>
Make sure your component is located at components/page-comp/home/ListMovieStyleA.vue so that Nuxt's auto-import can find it as LazyListMovieStyleA in your template. You do not need to import or define it in your <script setup> block—Nuxt will handle this automatically if the file is in the correct directory and named properly. If you specifically want to use defineLazyHydrationComponent, you need to ensure your Nuxt version includes this macro (which, as of the knowledge sources, is not part of the stable release). Otherwise, stick to the documented approach above for lazy hydration in Nuxt 3 Delayed (or Lazy) Hydration. Summary:
- Remove the <script setup> block with defineLazyHydrationComponent. - Use <LazyListMovieStyleA hydrate-on-visible /> in your template. - Ensure your component is in the correct directory for auto-import. If you need the macro functionality, you may need to wait for its official release or use a custom implementation, but this is not covered in the current official documentation feat(nuxt): support lazy hydration macros. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@370350739761135617> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?