codesandbox / codesandbox/codesandbox-client
LitElement not working in TypeScript project
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- I have read the
Contributing Guidelines
for this project. - I agree to follow the
Code of Conduct
that this project adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
I'm not able to create a TypeScript project that can use the next versions of LitElement and lit-html.
I'm starting with a vanilla TypeScript project and then adding a dependency on lit@2.0.0-pre.1. On importing this into index.ts:
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
@customElement("my-element")
export class MyElement extends LitElement {
render() {
return html`<h1>Hello</h1>`;
}
}
I get source errors that TypeScript can't find the module 'lit'.
Then in the preview window I see errors that I "Cannot use import statement outside a module" as in https://github.com/codesandbox/codesandbox-client/issues/5464
Next, I tried to remove Parcel from the equation to get to a more vanilla project, thinking that Parcel can't handle the ES2020 in the lit package. I edit package.json:
"scripts": {
"start": "web-dev-server --node-resolve",
"build": "tsc"
},
"dependencies": {
"lit": "2.0.0-pre.1"
},
"devDependencies": {
"@web/dev-server": "^0.1.8",
"typescript": "^4.2.0-beta"
},
and modify index.html to import the compiled module directly with:
<script src="lib/index.js" type="module"></script>
This should set up a very vanilla TypeScript project that serves individual compiled modules. The error is now "Could not find module in path: './lib/index.js' relative to '/index.html'"
How has this issue affected you? What are you trying to accomplish?
Trying to use Lit's preview release.
To Reproduce
Link to sandbox: link (optional)
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | ? |
| Browser | Chrome 88.0.4324.182 |
| Operating System | macOS |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked sandbox and compare its index.ts, package.json, and index.html against the reported TypeScript and web-dev-server setup. Reproduce the TypeScript module-resolution and preview errors, then trace how the project handles Parcel, tsc output, and module imports. Done means a vanilla TypeScript project can import lit and run its preview without these errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100