LitElement not working in TypeScript project

[justinfagnani]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] 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 [email protected]. 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

[justinfagnani]

@CompuIves I'm trying to get any template to work with lit with this PR and I'm not succeeding so far. Here a plain JS project that is having errors due to JS module to CommonJS conversion: https://pr5551.build.csb.dev/s/old-snowflake-8q73b?file=/src/index.js

Is there vanilla JS or TS template that does not compile to CommonJS at all?

[CompuIves]

Hmm, that's indeed weird, for me this sandbox works: https://codesandbox.io/s/priceless-hooks-q1w2o?file=/src/index.ts.

I changed the import statement in index.html back, it turns out that we were not detecting the minified esmodules properly. However, I do see the warnings that the parser doesn't recognize some tokens for some reason. I'll open this PR again to take a double look at that.

[justinfagnani]

Anything I can do to help here?

I just tried to make a new Lit example from the TypeScript starter again and hit a number of problems from modules to JS language levels. I tried to replicate the sandbox you linked, but kept hitting problems where the element class was compiled to ES5.

Is there a way we could get a Lit starter template that doesn't involve a bundler and works as a working starting point for our common users?