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
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.5Used 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