Typescript module resolution not working

7
votes

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.

5
typescripttsconfig
What is your builder ? webpack, fusebox, or are you directly using tsc ? – Jules Sam. Randolph
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. – Jules Sam. Randolph
See typescriptlang.org/docs/handbook/… – Jules Sam. Randolph
Try import { IntHelper } from './utils/IntHelper'; – zeh
See answer here: stackoverflow.com/questions/42197563/… – Patrik Forsberg

5 Answers

8
votes

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!

1
votes

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

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

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.

0
votes

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