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.

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!

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(),
        ]
      },