https://github.com/malcolmstill/astro-lit-hydration-issue

https://github.com/malcolmstill/astro-lit-hydration-issue

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/malcolmstill/astro-lit-hydration-issue
• Owner: malcolmstill
• Created: 2023-11-01T12:17:24.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-01T12:29:30.000Z (about 1 year ago)
• Last Synced: 2023-11-01T13:32:03.531Z (about 1 year ago)
• Language: TypeScript
• Size: 66.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Astro + Lit SSR hydration issue



Component `B` (child of component `A`) fails to hydrate when using SSR.

In component `C` and `D` I instead define constructors to set the properties hydration seems to work but then `items` in component `D` is at some point `undefined` and an error is thrown.

- Is this a bug / issue?

- Am I holding astro, lit or astro + lit wrong?

## Details

This is a minimal reproduction built by:

1. Create astro project

```

npm create astro@latest

```

(empty project using typescript)

2. Add lit

```

npx astro add lit

```

3. Update tsconfig

Add options `experimentalDecorators` `true` and `useDefineForClassFields` `false`:

```

{

  "extends": "astro/tsconfigs/strict",

  "compilerOptions": {

    "experimentalDecorators": true,

    "useDefineForClassFields": false

  }

}

```

4. Add components (see `index.astro` + `src/components/`)