Lit component using Typescript can't build with decorators

[jaydanurwin]

What version of astro are you using?

1.0.8

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

Describe the Bug

I'm surprised this one hasn't been reported quite yet with the Astro + Lit integration using Typescript. I am getting this error when I use a the @Property, @State, @query, etc. decorators then run a build. In dev it's totally fine and renders the component through SSR with partial hydration.

 error   The requested module '@lit/reactive-element/decorators/custom-element.js' does not provide an export named 'property'

I've attached a Stackblitz reproduction based on the Astro Lit starter. You should just have to open it and run a build to see the issue.

experimentalDecorators is set to true in the tsconfig.json, the component file name has been changed, and the import has been updated in the index.astro file.

Would it be a good idea to have a standard Astro + Lit starter and a Astro + Lit starting user Typescript? This is something Vite does in it's CLI and it's really nice to have a boilerplate starter that's already set up to use TS.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-cg4wsd?file=src/pages/index.astro

Participation

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

[matthewp]

I would probably just say 1 starter that uses TypeScript since that's what most people in the community use.

[jaydanurwin]

I think that makes sense. I personally use Typescript nearly exclusively for my Lit components and with Astro it's nice that it just can handle it for you. It's a big selling point honestly. Any ideas on the build error?

[matthewp]

This seems to fix it in your config:

vite: {
    ssr: {
      external: 'lit/decorators.js',
    },
}

A lot of the lit packages don't work well in Vite for some reason. I'll see about adding this config to the integration so its not needed by end users.

[jaydanurwin]

Awesome, thanks for the tip on the Vite config!