TS ERR_REQUIRE_ESM -> Cannot use import statement outside a module -> ERR_UNKNOWN_FILE_EXTENSION -> repeat

Question

I've been stuck in an error cycle for hours. I want to have a TypeScript project but each "solution" to each error just moves to another error and it cycles.

It starts with ERR_REQUIRE_ESM so in tsconfig.json I change module to es2020 . Then I get the error Cannot use import statement outside a module , so in package.json I set type to module . Then I'm told [ERR_UNKNOWN_FILE_EXTENSION] Unknown file extension ".ts" which I'm told to remove type from package.json and also being told to set module to commonjs . The cycle continues, and trying to "just use nodemon app.ts " doesn't work as it's same issues except now errors when trying to fiddle with things.

I have no idea what to do, I've followed guides to get set up and problems start when I try to import or require packages. I've only previously used TypeScript with create-react-app before and am used to things just working. I don't know if it is meant to be this much of a pain to just get set up but it's so much extra work and frustration than other languages. Is there just a command like create-react-app that just sets up a basic TS project?

Answer 1

so I experienced the same issue but resolved it by using the following settings in the tsconfig:

{
  "ts-node": {
    // these options are overrides used only by ts-node
    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
    "compilerOptions": {
      "module": "commonjs"
    }
  },
  "compilerOptions": {
    "target": "es5",
    "lib": ["esnext"],
    "sourceMap": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

Disclaimer: this tsconfig is for a backend project.
For a frontend project, you can add dom and dom.iterable to the lib options and remove the special ts-node compiler options from the tsconfig