Typescript module not found error after compilation

Question

This has been driving me crazy. How can I get typescript to compile the imported module correctly? My main.ts has import { AddListeners } from './listeners'; which is also a .ts file with export function AddListeners() but when compiled to main.js, this line doesn't change and node throws this error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\bugbe\Documents\VSCode\tricorder\dist\listeners' imported from C:\Users\bugbe\Documents\VSCode\tricorder\dist\main.js

Here is my tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "outDir": "dist",
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2020",
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "./",
    "paths": {
      "*":[
        "node_modules/"
      ]
    }
  }
}

so the code to import the module is not be compile correctly because to work it should look like import { AddListeners } from './listeners.js';

Answer 1

I ran into this problem when compiling TS to ES modules with Node 15. Turns out that TS does not add the ".js" extension to your import paths automatically when compiling the modules, but the ES path resolution algorithm expects the extension to be present.

For me it was as simple as using the --es-module-specifier-resolution=node flag to get Node to use the old require() resolution behaviour:

node --es-module-specifier-resolution=node ./dist/src/main

---

For reference my setup is the following:

package.json

{
    ...
    "type": "module"
}

tsconfig.json

{
    "include": ["src/**/*", "package.json"],
    "compilerOptions": {
        "composite": true,
        "declaration": true,
        "declarationMap": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "module": "ESNext",
        "moduleResolution": "node",
        "newLine": "LF",
        "noFallthroughCasesInSwitch": true,
        "noImplicitReturns": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "preserveConstEnums": true,
        "removeComments": true,
        "resolveJsonModule": true,
        "strict": true,
        "target": "ES2018"
    }
}

Answer 2

You should run the program with node using the flag --es-module-specifier-resolution=node because you are using es6+ Module type. If you are using CommonJS you wouldn't have this issue.

Answer 3

In Typescript source files, make sure to import other Typescript files with the .js extension.

import { AddListeners } from './listeners.js';

Allso in the tsconfig.json set the module to es6

"module": "ES6",  

And make sure to set the type to module in the package.json.

"type": "module",

Answer 4

1. In your tsconfig.json you have "module": "es2020". That means that typescript will compile your code to use ES modules. To run nodejs with ES modules you need v12 of nodejs and run it with the --experimental-modules flag or have nodejs version 13.2.0+ to run without the --experimental-modules flag.
2. If you cannot use newer versions of the nodejs you need to change "module": "es2020" to "module": "CommonJS".

Answer 5

Make sure that you do not declare an enum in any .d.ts files. When you try to use an enum that declared in those type of files, it causes Cannot find module error.

Answer 6

If your project is under any folders with foldernames containing alt characters or emojis (if possible), typescript will start to behave weird.

I had named a 3 level parent folder of my project to "⬛" to hide it causing the issue.

Renaming it to normal solved the issue.

Answer 7

In TS Files, Make sure your relative path are correct and not having wrong relative path. Since, While clicking on it from TS file, you might be redirected to right path but in js build files, IT might be problematic issue while creating paths.