Mime type error when attempting to load ts/js into hugo

support
1

Hi all, I loaded ts/js into my hugo template but I’m stuck on this error:

localhost/:1 Refused to execute script from 'http://localhost:1313/js/public.min.96c0ed8357c9dddb780bbc4aff81e7fde27919c5b644b2e5ac344d3307bd08ef.ts' because its MIME type ('video/mp2t') is not executable.

The file that is linked is this:

import "../sass/branches/index.scss";
import NavMarketing from "./utils/nav_marketing";

// Bind events that happen on DOM Load
document.addEventListener("DOMContentLoaded", () => {
  NavMarketing.init();
});

It seems other people have run into this issue and solved it specifically for Angular. I didn’t find any solutions that were relevant. Any pointers in the right direction are appreciated. :raised_hands:

Additional info

This is what my scripts partial looks like, in case that is relevant:

{{ $script := resources.Get "js/public.ts" | resources.Minify | resources.Fingerprint }}
<script type="text/javascript" src="{{ $script.Permalink }}"></script>
2

error comes from the extension .ts (where it comes from??)
add type="text/css" to the link

my version looks like (without SCSS)

{{ $mccs := resources.Get "css/main.css" }}
{{ if hugo.IsProduction }} {{ $mccs  = $mccs | minify | resources.Fingerprint site.Params.digest }} {{end}}
<link type=text/css rel=stylesheet href={{ $mccs.RelPermalink }} {{ if hugo.IsProduction }} integrity={{ $mccs.Data.Integrity }} {{end}} media="screen, print" />

if you use fingerprinting, add the integrity option!

4

I accidentally posted an incorrect CSS partial, I fixed my original post

5

Bumping this up for reach :grimacing:

6

Please have a read about Requesting Help to see how to help us help you more easily.

7

Will replicate in a separate repo next time. Figured this one out. Basically the answer is you have to use webpack (which I thought hugo would take care of transpiling js automatically).