Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Closed
7 tasks done
augustjk opened this issue Apr 14, 2023 · 1 comment · Fixed by #12855
Closed
7 tasks done

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

augustjk opened this issue Apr 14, 2023 · 1 comment · Fixed by #12855
Assignees

Comments

@augustjk
Copy link
Contributor

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

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant