unable to use lit context with lit integration

[lschierer]

Astro Info

~/projects/withastro-astro-gxjipq
❯ npx astro info
Astro                    v4.0.4
Node                     v18.18.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/lit

~/projects/withastro-astro-gxjipq 1s
❯

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

Chrome and on the command line with astro build

Describe the Bug

on attempting to use the lit context per https://lit.dev/docs/v2/data/context/

I get

generating static routes 
02:36:35 ▶ src/pages/index.astro
this.host.addEventListener is not a function
  Stack trace:
    at i.attachListeners (file:///home/projects/withastro-astro-gxjipq/node_modules/@lit/context/lib/controllers/context-provider.js:22:832)
    at eval (file:///home/projects/withastro-astro-gxjipq/node_modules/@lit/context/lib/decorators/provide.js:21:384)
    at Array.forEach (<anonymous>)
    at new p (file:///home/projects/withastro-astro-gxjipq/node_modules/@lit/reactive-element/node/reactive-element.js:29:800)
    at new ChildElement (file:///home/projects/withastro-astro-gxjipq/dist/chunks/pages/index_hxiUokk2.mjs:44:5)

~/projects/withastro-astro-gxjipq 3s

This may be because this version of the context libraries are deprecated, but I cannot upgrade them due to #728

What's the expected result?

It should compile a page and display something useful. Ideally it should entirely work as documented.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-gxjipq?file=src%2Fpages%2Findex.astro

Participation

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

[matthewp]

Yes, that is likely why, we are upgrading to Lit 3 here: #9406 Like, today. Closing, please reopen if you have an issue after you upgrade.

[lschierer]

Oh. I was really hoping that was the cause. I am still seeing the error after the upgrade.

11:58:48 ▶ src/pages/index.astro
this.host.addEventListener is not a function
  Stack trace:
    at i.attachListeners (file:///home/projects/withastro-astro-gxjipq/node_modules/@lit/context/lib/controllers/context-provider.js:22:832)
    at eval (file:///home/projects/withastro-astro-gxjipq/node_modules/@lit/context/lib/decorators/provide.js:21:384)
    at Array.forEach (<anonymous>)
    at new g (file:///home/projects/withastro-astro-gxjipq/node_modules/@lit/reactive-element/node/reactive-element.js:24:2927)
    at new ChildElement (file:///home/projects/withastro-astro-gxjipq/dist/chunks/pages/index_SomloJha.mjs:44:5)

~/projects/withastro-astro-gxjipq 3s
❯ 

I have updated the reproduction at stackblitz.

[matthewp]

It's an upstream bug. I've filed an issue for you here: lit/lit#4457

[lschierer]

Interesting. If it is SSR related, if I mark the components client only, would that work around the bug?

[lschierer]

interesting. IN case anyone finds this, client:visible does not work around the bug, but client:only does

[lschierer]

Thanks for your support!!

[matthewp]

Yeah, the problem is that it can't run on the server, so client:only is your best bet here.