Hamet•2mo ago

Transpile TS to JS

My app is serving a rendered ejs template as html. Inside my html there is

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

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

how does my app now return the typescript as javascript? I just get this error:

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

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

Im pretty new to deno and ts in general, so bear with me :)

7 Replies

[uncomfy@localhost ~]$ ▌•2mo ago

it's actually seeing a different file mime type e.g. video/mp4. I believe your HTML is seeing the file extension .ts as video/mp2t . but i do have the same question, does deno support TS -> JS ?

Doctor 🤖•2mo ago

Deno supports running TypeScript code, but the browser does not. You'll need to transpile your TypeScript code to JavaScript before sending it to the browser. The recommended way to do that is with Esbuild and the Esbuild Deno Plugin. On a side note, the .ts file extension isn't only used for TypeScript files.

[uncomfy@localhost ~]$ ▌•2mo ago

got it doc is tsc fine as well?

Doctor 🤖•2mo ago

¯\_(ツ)_/¯

HametOP•2mo ago

I think it worked, thanks for the help :)

import {build, stop} from "https://deno.land/x/esbuild@v0.24.0/mod.js"
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.10.3"

await build({
  plugins: [...denoPlugins()],
  entryPoints: ["./static/test.ts"],
  outfile: "./static/test.js",
  bundle: true,
  format: "esm",
})
stop()

import {build, stop} from "https://deno.land/x/esbuild@v0.24.0/mod.js"
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.10.3"

await build({
  plugins: [...denoPlugins()],
  entryPoints: ["./static/test.ts"],
  outfile: "./static/test.js",
  bundle: true,
  format: "esm",
})
stop()

Doctor 🤖•2mo ago

You can also do minify As one of the options

HametOP•2mo ago

That sounds good, Ill give it a shot