Hamet•4d 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

uncomfyhalomacro•3d 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 🤖•3d 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.

uncomfyhalomacro•3d ago

got it doc is tsc fine as well?

Doctor 🤖•3d ago

¯\_(ツ)_/¯

Hamet•3d 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 🤖•3d ago

You can also do minify As one of the options

Hamet•3d ago

That sounds good, Ill give it a shot