“Uncaught SyntaxError: Cannot use import statement outside a module” when importing compiled Typescript files to each other

Question

I'm using some compiled Typescript, accessed using <script src="../my-project/index.js"></script> in index.html. index.js then imports stuff from other compiled Typescript files, using import X from "./X"; in the typescript, which is kept exactly the same in the compiled .js files. My tsconfig file:

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es6",
    "outDir": "./"
  },
  "files": [
    "./src/index.ts",
    "./src/file1.ts",
    "./src/file2.ts",
    "./src/file3.ts",
  ]
}

I want to use the compiled JS files as normal JS, but for some reason it won't let me. I've done a little research into modules, but I don't understand why this is a module, if that's the problem.

Answer 1

Thanks Joseph, thats fixed it.

I ran into another problem importing the contents of the module script into another script, so I added the type="module" to all of the scripts. Not sure if that is a good solution, but it seems to work.