Typescript module resolution not working

Question

Instead of relative module imports I would like to import my modules like this: import { IntHelper } from 'utils/IntHelper';. Even though intellisense works fine in VSCode the transpiled javascript files throw an exception: Cannot find module.

My project structure:

root

• dist
• src
  • MyProject.ts
  • utils
    • IntHelper.ts
• tsconfig.json

File: MyProject.ts

import { IntHelper } from 'utils/IntHelper';

File: IntHelper.ts

export module IntHelper {
  export const xy: string = 'Test';
  export function crossSum(int: number) {
    return int; // Nonsense - ofcourse.
  }
}

Tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "*",
            "src/*"
        ]
    }
  }
}

My question:

Why does it throw the cannot find module exception in the javascript files even though it appears to be fine in the typescript files? When I hover the 'utils/IntHelper' part in my import line in the typescript file VSCode would also show the correct path to that module.

Hysterectomize

What is your builder ? webpack, fusebox, or are you directly using tsc ? – Audacity

You could provide --traceResolution to typescript compiler in order to see why your module is not resolved. If it is resolved by the compiler, your problem might come from your building solution. – Audacity

See typescriptlang.org/docs/handbook/… – Audacity

Try import { IntHelper } from './utils/IntHelper'; – Kendalkendall

See answer here: #42198063 – Vinitavinn

Is 'export module' NodeJS syntax for exporting stuff? – Jeannettajeannette

Answer 1

You are having the same problem as many others, the belief that the TypeScript compiler will save the resolved paths to the JS files. That is not the case. You will need to resolve this on your own, or by using a tool, WebPack is often what people suggest (WebPack, however, is a monster), please see this answer:

Typescript2 path module resolution

This will most likely solve your problem as well!

Vinitavinn

Another option is to use module-alias. It works on runtime, so it is not needed to run anything. Just import it in the entry point of your code. – Poteen

Answer 2

Of course in your case node gets confused about the module, because it expects all non-relative paths to be present in node_modules. The good solution with typescript is to use paths section of tsconfig like this:

{
  "compilerOptions": {
    "paths": {
        "@utils": [
            "src/utils/*"
        ]
    }
  }
}

now we can

import { IntHelper } from '@utils/IntHelper';

but we still have to notify webpack or node about out path configuration:

// for node:
--require tsconfig-paths/register

// for webpack
const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;


      resolve: {
        plugins: [
          new TsConfigPathsPlugin(),
        ]
      },

Higginbotham

Answer 3

I had a similar issue. What resolved it for me was also having to define the aliases in the webpack.config.js file.

resolve: {
    alias : {
        alias: {
            "@components": path.resolve(__dirname, "../src/components/"),
            "@constants": path.resolve(__dirname, "../src/constants/"),
            ....
        }
    }
}

Austerlitz

Answer 4

Extending Patrick_Forseberg's answer above.

There's no official way of fixing this as mentioned in this issue, but there is a (very) popular 3rd party npm package called tsconfig-paths that fixed my problem perfectly.

All thanks to eyedean for mentioning the package.

Heads

Answer 5

Make sure inside ts-config.json

{
"compilerOptions": {
...
    "baseUrl" : "***this path must point to your project directory***"
....
}

NOTE: I am currently on node v14.16.0 and typescript 4.4.2

Abreaction