Typescript module resolution not working

user_3924219 0
Viewed 23392

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.

tsconfig typescript
5 Answers

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!

user_22086320

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

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/"),
            ....
        }
    }
}
user_6051350

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.

user_109302930

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

user_84666130
Related