Node js says unknown file extension .ts while trying to run npm start

Question

I made a small server script in js using express and i changed my mind and wanted to convert it into ts so i did that but ever since I did that, node would send me an error message saying that unknown file extension .ts whenever I try to run npm start

This is the error:

PS C:\Users\aryan\OneDrive\Documents\GitHub\spacious-forms> npm start

> [email protected] start
> npx ts-node --esm src/server.ts

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\aryan\OneDrive\Documents\GitHub\spacious-forms\src\server.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async nextLoad (node:internal/modules/esm/hooks:749:22)
    at async nextLoad (node:internal/modules/esm/hooks:749:22)
    at async Hooks.load (node:internal/modules/esm/hooks:382:20)
    at async MessagePort.handleMessage (node:internal/modules/esm/worker:199:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

This is my package.json file

{
  "name": "spacious-forms",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "npx ts-node --esm src/server.ts",
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/md5": "^2.3.5",
    "@types/node": "^20.10.0",
    "@vitejs/plugin-vue": "^4.5.0",
    "express": "^4.18.2",
    "md5": "^2.3.0",
    "sqlite3": "^5.1.6",
    "tailwindcss": "^3.3.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.3.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
}

Here's my tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "paths": {
      "@/*": [
        "./*"
       ]
    },
    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "ts-node": {
    "esm":true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../src/vite-env.d.ts", "../src/main.ts", "vue.d.ts", "vue.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

I've surfed the web and tried every fix including changing the es versions, using ts node and everything but nothing works

Edit:

I did change the moduleResolution's"node" in 'tsconfig.json' to "Node" but I get the same error

Answer 1

Apparently, the issue is with ts-node. It just doesn't work properly for me so I used tsx which solved the issue and the server now runs without any issues.

try

npm i -g tsx

npx tsx src/server.js

That fixed the issue for me

Answer 2

It's a bit of a headache to find the problem, try changing it in your compilerOptions:

"module": "ESNext

by: "module": "CommonJS

If the problem persists, I invite you to look here: you'll find the solution by trying a bit of everything, plus it's superbly detailed.

Answer 3

if you are using node v20 add this to your ts.config file

 {
  "compilerOptions": { 
  //..
  },
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node",
},
}

Then run node --experimental-loader --loader ts-node/esm src/app.ts doing this will resolve the issue but will consume alot of your CPU I prefer downgrading to node vs 18.x or (I prefer v18.17.1) until the issue is resolved on node v20.