'Cannot find module that is defined in tsconfig `paths`

I am trying to setup aliases for my mock server. Whenever I try to compile ts files, it returns error that it couldn't find proper modules even though those are defined in tsconfig,json->paths

Folder structure:

├── server
│   └── src
│       └──/json
├── src
│   └──/modules
├── tsconfig.json

Here is my tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "experimentalDecorators": true,
        "jsx": "react",
        "lib": [
            "dom",
            "es2015",
            "es2015.promise"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "esModuleInterop": true,
        "paths": {
            "@project/app/modules/*": [
                "modules/*"
            ],
            "@project/server/data/*": [
                "../server/src/json/*"
            ]
        },
        "sourceMap": true,
        "target": "es5"
    },
    "exclude": [
        "node_modules",
        "tools"
    ]
}

Error: Error: Cannot find module '@project/server/data/accounts/accountsList'

Solution 1:^[1]

I faced the same issue. I tried many things and now i got a solution which works for me. I have an app and a library in my angular project. I want to use a library alias in my app.

I have following structure:

??? projects
?   ??? lib
?       ??? src
?           ??? lib
?               ??? lib-service.ts
?           ??? index.ts
?   ??? app
?       ???tsconfig.app.json
??? tsconfig.json

In the tsconfig.json file in the root folder I have following paths defined:

"paths": {
  "my-lib": [
    "projects/lib/src/index.ts"
  ]
}

There I access an index.ts file where I define the things I want to export. In my case the index.ts file has the following entry:

export * from './lib/lib-service';

Now I can access the LibService in components of the app with the help of the alias:

import {LibService} from 'my-lib';

It is important to mention that this soloution don't work if I add this entry to the tsconfig.app.json file. I think the IDE (in my case WebStorm) searches for aliases in the tsconfig.json file which is close to the root folder. So I extend the tsconfig.json in my tsconfig.app.json

"extends": "../../tsconfig",

Maybe you have to restart you IDE to remove the red underline of the import line.

I hope this solution works for you. You have to to a little bit more of setup work because you have to define the classes you want to export in the index.ts file. But in case of using libraries it make sense because you don't want to make everything visible for other app.

Solution 2:^[2]

My issue was that my tsconfig.app.json which extended my tsconfig.json was overriding the "baseUrl" option incorrectly. I removed it from the tsconfig.app.json so it did not have a "baseUrl" or "paths". In the end, my tsconfig.json had the following compiler options:

"baseUrl": "src/",
"paths": {
    "@shared/*": ["shared/*"],
    "@client/*": ["client/*"],
    "@server/*": ["server/*"]
}

Solution 3:^[3]

After battling it for some time I figured it out you need to include all directories using tsconfig-paths in your main tsconfig.json. Working version of your tsconfig.json file could be

{
    "compilerOptions": {
        "baseUrl": ".",
...
        "paths": {
            "@project/app/modules/*": [
                "src/modules/*"
            ],
            "@project/server/data/*": [
                "server/src/json/*"
            ]
        },
    },

    "include": [
        "./src",
        "./server"
    ],
}

Solution 4:^[4]

The following tsconfig.json worked for me, allowing import { foo } from '@models' etc for the associated index.ts barrel exports:

{
    "baseUrl": "./",
    "paths": {
      "@environment": ["./src/environments/environment.ts"],
      "@models": ["./src/app/shared/models/index.ts"],
      "@services": ["./src/app/shared/services/index.ts"]
    },
}

Solution 5:^[5]

TLDR;

npm i -D module-alias

and add the mappings from your tsconfig.json paths to _moduleAliases in your package.json

"_moduleAliases": {
  "foo": "dist"
}

As for the reasoning behind it, using "jsx": "react" in conjunction with "module": "commonjs" prevents you from being able to use absolute imports even though baseUrl and paths are configured correctly. A detailed discussion can be found in this issue.

Solution 6:^[6]

TypeScript path properties can only resolve typings-based URLs such as an interface.

The intended behaviour is to allow TypeScript to resolve type information[1]

Most us seem to be experiencing that a path pointing to an actual dependency wont always compile as we expect. This is apparently by design despite what the doc says:

{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
    }
  }
}

Read this great breakdown by Mitchell Simoens - Why TypeScript Paths Failed Me

Found this after setting up @paths to my shared folders throughout the app. During compilation TS paths where breaking and actual builds were missing all sorts of modules. On a personal note this is a huge disappointment that TS can't reliably resolve dependencies this way.

Solution 7:^[7]

I put it both in webpack resolve alias and the tsconfig paths and it worked that way :)

Solution 8:^[8]

There are some issues with path, for example if you set the path to the root let us say: @root/src and in src there is no index.ts that has a default, then this might fail...

It's a bit tricky per what I found.

Solution 9:^[9]

When u use the bare variant with just tsconfig.json ("typescript": "^4.4.4") without any third party libraries:

Add baseUrl.

"baseUrl": ".",

Add paths.

"paths": {
      "@app/assets/*": ["src/assets/*"],
      "@app/components/*": ["src/components/*"],
      "@app/features/*": ["src/features/*"],
      "@app/hooks/*": ["src/hooks/*"],
      "@app/navigation/*": ["src/navigation/*"],
      "@app/services/*": ["src/services/*"],
      "@app/utils/*": ["src/utils/*"]
}

Add package.json with a name of alias for each path inside the destination folder.

// src/assets/package.json
{
  "name": "@app/assets"
}

Solution 10:^[10]

Check angular.json file if its "build" -> "options" config has "tsConfig" option set as your changed tsconfig file.

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",
      "tsConfig": "src/tsconfig.app.json",
      "polyfills": "src/polyfills.ts",
      "stylePreprocessorOptions": {
        "includePaths": [
          "src/assets/styles"
        ]
      },
............

The above one is my angular.json file, and I configured it to use tsconfig.app.json. In this case, "paths" should be added in tsconfig.app.json file.

Solution 11:^[11]

You can easily define simple path resolver like this:

loader.js

const Module = require("module");
const originalResolveFilename = Module._resolveFilename;
const tsConfig = require("./tsconfig.json");
const Path = require("path");
const fs = require('fs');
if (!tsConfig.compilerOptions || !tsConfig.compilerOptions.baseUrl)
    throw "Compiler options Base URL (compilerOptions.baseUrl) is required in tsconfig.json.";
const basePath = Path.resolve(tsConfig.compilerOptions.baseUrl, tsConfig.compilerOptions.outDir);

//Inspired by https://github.com/dividab/tsconfig-paths but that one does not work with VS Code
Module._resolveFilename = function (request) {
    if (tsConfig.compilerOptions && tsConfig.compilerOptions.paths[request] instanceof Array) { //Supports only without wildchars, but enough for our use
        const pathsTried = [];
        for (const reqPath of tsConfig.compilerOptions.paths[request]) {
            const modPath = Path.resolve(basePath, reqPath) + ".js";
            if (fs.existsSync(modPath)) return modPath;
            pathsTried.push(reqPath);
        }
        throw "Module " + request + " not found, paths tried: " + pathsTried.join(", ");
    }
    const ret = originalResolveFilename.apply(this, arguments);
    return ret;
};

and than reference it from VS Code's launch.json like this:

"configurations": [
{
  "type": "node",
  "request": "launch",
  "name": "Node.js",
  "runtimeArgs": ["-r", "./loader.js"],
  "program": "${workspaceFolder}/run.ts",
  "preLaunchTask": "tsc: build - tsconfig.json",
  "outFiles": [
    "${workspaceFolder}/out/**/*.js"
  ]
}]

It does not support patterns in paths but with this stub it can be added.

tsconfig.json should look like this:

"compilerOptions": {
    "outDir": "out", //required
    "moduleResolution": "node",
    "baseUrl": "./", //required
    "paths": {
        "InjectableStub": [ //requires 2
            "myapp/myfolder/mymodule", //used in runtime
            "./myfolder/mymodule //used in compile-time
        ]
    }
}

at least for me tsc creates sub-folder in name of the root folder in out that's why the 2 registrations.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	troYman
Solution 2	Jake Tyler
Solution 3	Konrad Ga??zowski
Solution 4	Andrew
Solution 5	Mateja Petrovic
Solution 6
Solution 7	Ido
Solution 8	piotrek1543
Solution 9	Michael Rezkiy
Solution 10	Julian Lin
Solution 11	Äonny

'Cannot find module that is defined in tsconfig `paths`

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]