I'm facing some trouble to hit on Microsoft Clarity a react component hydrated with client:load
#Microsoft Clarity - Not working on
ember matrix
coarse graniteBOT
Hi @ember matrix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro provides a way to hydrate React components (or components from other UI frameworks) using client:* directives. If you're using the client:load directive, it means that the component's JavaScript will be sent to the browser and run as soon as the page loads, making the component interactive.
Here's an example of how you might use it:
<PreactBanner client:load />
However, if your React component is not responding to user interaction, it's possible that you might be missing a client:* directive to hydrate your component. By default, a UI Framework component is not hydrated in the client. If no client:* directive is provided, its HTML is rendered onto the page without JavaScript [source (https://docs.astro.build/en/guides/troubleshooting/#my-component-is-not-interactive)].
If you're still facing issues, it might be helpful to check the console for any errors. If you see an error like NoClientEntrypoint, it means that Astro tried to hydrate a component on the client, but the renderer used does not provide a client entrypoint to use to hydrate [source (https://docs.astro.build/en/reference/errors/no-client-entrypoint/#_top)].