[docs] Polymer serve Typescript Lit Element - non-JavaScript MIME type

[canpan14]

Description

Going off of this SO post, I followed the docs guide exactly for setting up a Lit Element locally. Using what they had written in their stackblitz examples.

Ignoring the fact they have no script tag to include the index.ts I get the following error after running polymer serve:

Failed to load module script:
The server responded with a non-JavaScript MIME type of "video/mp2t".
Strict MIME type checking is enforced for module scripts per HTML spec.

I understand this is because I'm giving it a typescript file and it can only naturally handle JS. But I was hoping the documentation could provide a note or something that points to how to get it to work locally.

Live Demo

Stackblitz seems to handle it for you which is why their examples work.

Steps to Reproduce

Copy the exact files they have in their stackblitz locally and try and serve it. You may need to add the following to the html head

<script type="module" src="./index.ts"></script>

Expected Results

No error is thrown and the lit element appears

Actual Results

Blank page and the following error in the console

Failed to load module script:
The server responded with a non-JavaScript MIME type of "video/mp2t".
Strict MIME type checking is enforced for module scripts per HTML spec.

Browsers Affected

• [x ] Chrome
• [ x] Firefox
• [x ] Edge
• [x ] Safari 11
• [x ] Safari 10
• [ x] IE 11

Versions

• @webcomponents/[email protected]
• [email protected]

[arthurevans]

Related to #420, among others.

[arthurevans]

Related to #420.

[mcalthrop]

Is there any update on this issue?

I've done the same thing: followed the same steps in the documentation, and it doesn't work (as described in this issue).

What has to be done to the sample code to make it work?

[arthurevans]

Apologies, I'm in the middle of rewriting the getting started section, but it's not ready yet.

You can't copy the stackblitz example directly for a local project, because stackblitz handles TypeScript in an unusual fashion. In particular: for normal development, you never include a TypeScript file, you include the compiled version:

<script type="module" src="./index.js"></script>

StackBlitz uses the ".ts" as a cue that it needs to transpile that file... But a real project needs to reference the compiled JavaScript. If you already have the TypeScript compiler set up, this may be the only thing you need to change.

If you don't have TypeScript set up, you need to install the typescript compiler and set up a compilation step.

Here's a (work-in-progress) starter repo that includes everything you need to compile TypeScript (and then some): https://github.com/PolymerLabs/lit-element-starter-ts

If you want to get started and try out some of the TypeScript decorators, you can start with cloning that repo. (Note that its README points back to the getting started guide. This is somewhat misleading, as the updated getting started guide isn't ready and the existing getting started guide doesn't discuss this repo.)

Please let me know if you run into any problems.

[mcalthrop]

Thanks for the helpful reply @arthurevans .

I've cloned that repo, and will attempt to pick out the basics of the minimum that is needed for me to get just a decorator working... plan on creating a simple repo to show this, so will ping you when that's done.

[arthurevans]

Great. Actually if you roll back to the initial commit in that repo (https://github.com/PolymerLabs/lit-element-starter-ts/commit/387a753d1f3ad652f8c3957702fbd4f2d674fc5b) you can find a version without testing, doc site, and all that.

I think the TypeScript config in the new version is simpler, though.

[mcalthrop]

@arthurevans Ok, I've really quickly put something together: https://github.com/mcalthrop/wc-lit-element-ts

Would be grateful for your opinion – and hope it's useful!

Signing off for the week... have a good weekend :-)

[arthurevans]

Thanks @mcalthrop ... I think your issue with @types/form-data is related to polymer-cli; when I remove polymer-cli and replace it with es-dev-server I don't see any references to @types/form-data.

[mcalthrop]

@arthurevans Ah, nice... I just updated the repo to reflect this change. Thanks!