Typescript module resolution is not working

Question

I'm currently struggling to get my project running. I'm using typescript without any frameworks. This is my main.ts file:

import { Game } from './game.js'

const game = new Game()
game.start()

Game is a class which I export. When I try to import the compiled javascript, I get the following error in the browser: Uncaught SyntaxError: import declarations may only appear at top level of a module

I searched the web and people suggested to put the attribute type="module" into the script tag, so I did just that. But then I got an error that was something about Cross-Origin headers and the inte.net suggested to use a dev/webserver, so I spun up a vm and set up port forwarding, but now I get this error in the browser: Loading module from “http://[ip]/game.js” was blocked because of a disallowed MIME type (“text/html”).

And now I don't know what to to. I tried switching module to commonjs , ES2020 , but the error still persists.

This is my tsconfig.json :

  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "build",
    "strictNullChecks": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
    "include": [
        "src/scripts/**/*"
    ]
}

Answer 1

So apparently the issue was that nginx was not detecting file extensions correctly. Adding include mime.types; to the nginx config resolved the issue.