You are attempting to render <Listing client:visible />, but Listing is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.
#Getting error while adding iteractivity
mint eagle
heady gustBOT
Hi @mint eagle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The error occurs because you are trying to use a hydration directive (like client:visible) on an Astro component. Astro components are HTML-only and do not have a client-side runtime, so they cannot be hydrated or made interactive using client directives. Hydration directives such as client:visible are only supported on UI framework components (e.g., React, Svelte, Vue), not on .astro files.
To fix this, you should:
- Use a framework component (e.g., a React, Svelte, Vue, etc. component) if you need client-side interactivity and apply the client directive to that component.
- Do not use client:* directives on Astro components. If you need to add client-side JavaScript to an Astro component, use a standard <script> tag instead.
From the documentation:
If you try to hydrate an Astro component with a client: modifier, you will get an error. Astro components are HTML-only templating components with no client-side runtime. But, you can use a <script> tag in your Astro component template to send JavaScript to the browser that executes in the global scope.
Can I hydrate Astro components?