The dev server uses mime type "video/mp2t"

[eirslett-visma]

Describe the bug

When getting .ts files from the vite server, they are delivered with the wrong mime type.
Expected would be Content-Type: text/javascript but instead we get Content-Type: video/mp2t.

Reproduction

A simple minimal vite project, with a .ts file to be transpiled, should be enough. See the curl call below for reproducing it.

System Info

• vite version: 2.1.2
• Operating System: MacOS Big Sur
• Node version: v14.15.4
• Package manager (npm/yarn/pnpm) and version:
  npm: 6.14.10

Logs (Optional if provided reproduction)

Example curl command:

curl http://localhost:4000/src/hello.ts -I
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Length: 49
Content-Type: video/mp2t
Last-Modified: Mon, 22 Mar 2021 09:22:14 GMT
ETag: W/"49-1616404934238"
Cache-Control: no-cache
Date: Mon, 22 Mar 2021 09:23:10 GMT
Connection: keep-alive
Keep-Alive: timeout=5

Possible cause of the bug

Looks like vite uses the module sirv under the hood to serve the files. Sirv uses the mime which makes from file extension to Content-Type. Looks like mime maps .ts to video/mp2t.

[GrygrFlzr]

For those seeking to fix this: it is notable that .ts has always been a valid MPEG Transport Stream video format and even predates TypeScript by 17 years, which is why it maps to video/mp2t pretty much everywhere.

It is technically possible to detect an MPEG transport stream by the fact that it has an ASCII capital G every 188 bytes. In our case this a flawed heuristic because it uses a common keyboard character, and it is technically possible that you happen to have a valid TypeScript file with a capital G every 188 bytes starting from the 0th byte:

G();
function G() { console.log('Valid TypeScript'); }

Yes, this is a contrived example, but it runs.

Despite this fact, it is most likely that most people using the Vite server are serving TypeScript instead of MPEG transport streams. Since MPEG is the outlier case here, it is in my opinion fine for Vite to temporarily override all .ts MIME types to text/javascript, and we can raise a separate issue for the MPEG video MIME type, which is a much more complex use case to support.

[cawa-93]

Related:

• https://github.com/jshttp/mime-db/issues/148
• Create a Typescript Mimetype microsoft/TypeScript#25426

[kgullion]

I'm running into this in production with audio-worklets. import processorUrl from "../worklets/audio-processor.ts?url"; works great in dev but throws "DOMException: The user aborted a request." in production. When the imported url is logged, it starts with data:video/mp2t;base64,. Seems like the behavior is inconsistent.

On a side note, it would be nice to have a "*?worklet" hook that registers the module automatically. Maybe by extracting the name from the registerProcessor call in the worklet itself?

[patak-dev]

@kgullion could you open a new issue with a minimal reproduction linking to this one so we can properly track your issue? Thanks!