@astrojs/lit Hydration Fails

[andeeplus]

Astro Info

Astro                    v3.3.0
Node                     v18.18.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/lit

If this issue only occurs in one browser, which browser is a problem?

-

Describe the Bug

Hydration do not occur. Please note that if the component is loaded using the directive client:only="lit" it works correctly. Looks like an issue with lit/ssr.

I'm worried it could be related with this: https://github.com/withastro/astro/issues/8825

What's the expected result?

Hydration should work

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fqvkdx-cut6vb?file=src%2Fpages%2Findex.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[lilnasy]

It seems to be working fine.

Is it possible a lockfile made your package manager install the incompatible version? Feel free to reopen if there is more to this issue.

[andeeplus]

Sorry for the late response.

It works because the client:load one is hydrating the server only. Try to comment the client:only and you will see it's not working. Please reopen.

[lilnasy]

I am reopening the issue because you insist (you shouldve been able to do this yourself), but there is nothing to fix here - hydration works the same no matter the client directive. I hope you see how this is just going to create noise for the maintainers and contributors.

[andeeplus]

@lilnasy I'm genuinely disheartened and somewhat disillusioned by your response and the manner in which you've interacted with me. I had hoped to address an issue, but it seems there's been a misunderstanding.

Kindly take note of the distinction: The firs element is intended to be rendered on the server and hydrated on the client while the second is meant for client-side loading. The functionality of the first component is contingent solely on the presence of the second.

Now, observe the image below. This isn't functioning as the second element is absent, thus causing the issue.

It appears there is an issue with the lit integration, particularly with the lit-labs/ssr module.

[lilnasy]

Is it expected that hydration take place in the second case?

[andeeplus]

Sure, the first component is expected to be hydrated on the client. What would be the reason to render a component that is not hydrated hence not working?

[lilnasy]

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.

[andeeplus]

@lilnasy thanks for your answer, I was probably missing the point that the directive was needed. I thought it will be loaded automatically by default once rendered and that the hydration would have been handled directly by lit-lab/ssr. I'm genuinely thankful for your explanation. I hope this ticket can helps somebody doing my same error in the future.

[lilnasy]

I hope this ticket can helps somebody doing my same error in the future.

Thanks! That's a good point. I am linking relevant docs for those who find this thread.

https://docs.astro.build/en/core-concepts/framework-components/#hydrating-interactive-components https://docs.astro.build/en/reference/directives-reference/#client-directives