Skip to content

[template-lit-ts] Project fails to render #12854

@augustjk

Description

@augustjk

Describe the bug

The tsconfig changes introduced in #12604 does not work with Lit projects.

In particular, we need

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
  }
}

as Lit's currently published decorators are not based on the latest ES spec, and Lit's reactive properties need to not be class fields. https://lit.dev/docs/components/decorators/#decorators-typescript

Reproduction

https://stackblitz.com/edit/vitejs-vite-zhcm7w?file=tsconfig.json

Steps to reproduce

Notice the page does not have content after loading in the preview pane of the repro link above.

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 35.43 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 111.0.1
    Safari: 16.4
  npmPackages:
    vite: ^4.3.0-beta.2 => 4.3.0-beta.5

Used Package Manager

npm

Logs

Here's a fixed example: https://stackblitz.com/edit/vitejs-vite-wyyu8w?file=tsconfig.json

Notice the preview renders properly and count increments on clicking.

Side note: There seems to be a problem with Stackblitz's typescript intellisense such that it shows TS errors in the editor for package imports with "moduleResolution": "bundler". This does not seem to be the case when opening the project in VS Code. Changing to "moduleResolution": "nodenext" fixes it in Stackblitz but "bundler" does make more sense for Vite projects.

Validations

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions