Lit Integration with client:load throws hydration exception

[JohannesKlauss]

What version of astro are you using?

2.1.7

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I am trying to integrate Lit in Astro, but doing so results in a uncaught exception in a promise during hydration:

Uncaught (in promise) Error: could not find node for attribute parts
    at createAttributeParts (experimental-hydrate.ts:356:11)
    at hydrate (experimental-hydrate.ts:172:7)
    at LitElement.update (experimental-hydrate-support.ts:110:7)
    at TestComponent.performUpdate (reactive-element.ts:1331:14)
    at TestComponent.scheduleUpdate (reactive-element.ts:1263:17)
    at TestComponent.__enqueueUpdate (reactive-element.ts:1235:25)

createAttributeParts | @ | experimental-hydrate.ts:356
-- | -- | --
  | hydrate | @ | experimental-hydrate.ts:172
  | LitElement.update | @ | experimental-hydrate-support.ts:110
  | performUpdate | @ | reactive-element.ts:1331
  | scheduleUpdate | @ | reactive-element.ts:1263
  | __enqueueUpdate | @ | reactive-element.ts:1235
  | await in __enqueueUpdate (async) |   |  
  | requestUpdate | @ | reactive-element.ts:1210
  | _initialize | @ | reactive-element.ts:948
  | ReactiveElement | @ | reactive-element.ts:931
  | LitElement | @ | lit-element.ts:115
  | TestComponent | @ | TestComponent.ts:5
  | legacyCustomElement | @ | custom-element.ts:21
  | (anonymous) | @ | custom-element.ts:64
  | __decorateClass | @ | TestComponent.ts:7
  | (anonymous) | @ | TestComponent.ts:5

Removing the client:load directive in the pages/index.astro file removes that error, but of course also does not load any Javascript

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/elated-wave-niqcur?on=codesandbox&file=%2Fastro.config.mjs&selection=%5B%7B%22endColumn%22%3A12%2C%22endLineNumber%22%3A8%2C%22startColumn%22%3A12%2C%22startLineNumber%22%3A8%7D%5D

Participation

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

[matthewp]

This looks like a Lit bug to me, but I am not certain. There is a comment node output by Lit that it expects to have a sibling element adjacent to, but there isn't one. I wonder if that comment should be before the <button> instead of inside. Any ideas @e111077?

[e111077]

This is def wrong. We recently did a release of Lit + lit-labs SSR. I see that there is a mismatch betwen @lit-labs/ssr and Lit. Lit is on newest and @astrojs/lit is pulling in an older version of lit ssr. I think an update might help

[e111077]

Found the offending PR:
lit/lit#3667

We have intention to split out lit's hydration code into its own module so that this is caught more automatically. Sorry about that

[matthewp]

@e111077 thanks, does this mean that there's currently a bug in ssr and upgrading won't help?

[augustjk]

It's more of an issue of mismatching versions as @e111077 originally pointed out. [email protected] requires @lit-labs/[email protected].

@lit-labs/ssr versions lower than that will work with [email protected] or lower.

We're in a bit of an unfortunate situation where the hydration code is part of the core lit package. The plan is to separate those out to a @lit-labs/ssr-client package so lit version can be updated without worry of breaking SSR hydration.

[matthewp]

@augustjk Still not 100% clear to me. The question is, can we (Astro) fix this right now? Can we upgrade to lit 2.7.0 and ssr 3.1.0 and the issue will be resolved?

[augustjk]

@matthewp yes it should be fixable by updating the versions in the lit plugin. @e111077 has started #6681 we'll work on making sure everything works there.