Typescript paths not working in an Express project

Question

I am trying to use TypeScript's paths functionality so that I don't need to use relative imports any more.

Here is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": ".",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "allowJs": true,
    "paths": {
      "*": ["node_modules/*", "src/*"],
      "@config/*": ["src/config/*"],
      "@controllers/*": ["src/controllers/*"],
      "@middlewares/*": ["src/middlewares/*"],
      "@models/*": ["src/models/*"],
      "@routes/*": ["src/routes/*"],
      "@types/*": ["src/types/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "firebase-config.json", "webpack.config.js"]
}

Here is my package.json file:

{
  "name": "express-ts-boilerplate",
  "version": "0.1.0",
  "description": "Express Typescript Boilerplate",
  "main": "src/server.js",
  "author": "Sriram R",
  "scripts": {
    "start": "NODE_ENV=production node dist/src/app.js",
    "dev": "nodemon src/app.ts",
    "build": "tsc -p .",
    "test": "mocha --exit -r ts-node/register src/tests/*.spec.ts"
  },
  "dependencies": {
    // Dependencies here
  },
  "devDependencies": {
    // Dependencies here
  },
}

So now in one of my files, I try @config/typeConfig but I just get cannot find module error.

Maybe it's because of nodemon but it didn't work with ts-node too. How can I get this to work?

"So now in one of my files". Which file? Where is it located? — jperl, Oct 03 '19 at 16:30
It is located under src folder. The server file where I'm importing config variables. — Sriram R, Oct 03 '19 at 19:39
Weird. I tried to replicate your problem and it's working fine here. How come you have nodemon src/app.ts? — jperl, Oct 03 '19 at 19:52
Because I'm using nodemon to run during development. That's where I suspect the problem is. — Sriram R, Oct 03 '19 at 19:53
No. That will only work after building the ts files. During testing, I don't want to keep it building every time and nodemon works fine with typescript express projects. — Sriram R, Oct 04 '19 at 04:45

jperl · Accepted Answer · 2019-10-08T11:08:00.950

Note: for a working example with nodemon, skip to the second section of my answer.

If you mean that once you compiled the files and run the application, the modules are not found, then have a look at this thread: Module path maps are not resolved in emitted code

"paths" is designed for use with loaders that allow remapping

Say I have this path in my tsconfig.json:

"paths": {
      "@config/*": ["src/config/*"]
    }

And I require a file using that path in a file

import test from '@config/test';

Looking into the compiled file, I end up with

var test_1 = __importDefault(require("@config/test"));

As you can see, paths have not been resolved, it's still @config/test. The same thing will happen when testing your app with nodemon and ts-node.

In addition, you need to use a Typescript path alias resolver, like for exampletspath.

The TypeScript compiler will be able to resolve the paths so this will compile without problems, however the JavaScript output will not be possible to execute by Node nor a Web Browser, why? the reason is simple!

The JavaScript engine does not know anything about the compile time TypeScript configuration.

In order to run your JavaScript code, the path aliases now needs to be made into relative paths again, here is when TSPath comes into play.

That being said, if you want to make things work with nodemon, the following configuration will do. Beforehand, make sure you installed tsconfig-paths.

npm i tsconfig-paths

Use this to load modules whose location is specified in the paths section of tsconfig.json. Both loading at run-time and via API are supported. (...) If you require this package's tsconfig-paths/register module it will read the paths from tsconfig.json and convert node's module loading calls into to physcial file paths that node can load.

Perfect, we will execute node with -r tsconfig-paths/register to convert paths into physical file paths and -r ts-node/register to execute ts files on the fly and nodemon will restart the app upon changes.

In your package.json, you need to add this (modify it as needed):

    "nodemonConfig": {
          "ignore":
            [
              "**/*.test.ts",
              "**/*.spec.ts",
              ".git",
              "node_modules"
            ],
          "watch": [
            "src"
          ],
          "exec": "node -r tsconfig-paths/register -r ts-node/register ./src/server.ts",
          "ext": "ts, js"
        },
    "scripts": {
          "dev": "nodemon"
        }

Note the added configuration for nodemon.

And finally

npm run dev

And things should be running smoothly.

so hard to find this. Truely safe me – Hiep Tran May 29 '20 at 04:13 — Hiep Tran, May 29 '20 at 04:13

score 28 · Answer 2 · edited Aug 17 '23 at 07:50

28

jperl's answer is completely correct.

In case you want a one-line solution:

nodemon -e ts,js --exec ts-node -r tsconfig-paths/register ./src/server.ts

Just remember to install tsconfig-paths/register:

npm i -D tsconfig-paths

In case instead of requiring -r tsconfig-paths/register in a CLI command or an npm script you would like to require it in ts-node configuration, you could do it in tsconfig.json as follows:

// in tsconfig.json
{
  // ... other TypeScript configuration
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  }
}

edited Aug 17 '23 at 07:50

Valentine Shi

6,604
4
46
46

answered Nov 06 '20 at 15:03

Moh682

793
1
7
11

2

Thanks for the answer , but you had better mention we have to install `tsconfig-paths`. – Behnam Esmaili Feb 10 '21 at 11:39
1

Thanks for the feedback. I will edit my answer – Moh682 Feb 11 '21 at 12:02
1

Should it say: npm i -D tsconfig-paths instead of npm i -D tsconfig-paths/register ? – johann1301s May 22 '21 at 21:59
absolutely true! i will fix it. – Moh682 May 23 '21 at 20:14
it dos't work for me – Samyar Mar 05 '23 at 12:23
Damn, this is convoluted. Thanks! – Bas von Bassadin Apr 10 '23 at 21:32

score 1 · Answer 3 · answered Jul 15 '21 at 21:04

In my particular case use "tsc-alias" these were my steps:

Install package npm install --save-dev tsc-alias
Change the command with which I compile in package.json to "build": "tsc && tsc-alias"
Modify my tsconfig.json because I did not have the outDir, so that it would look like this:

{
   "compilerOptions": {
      "outDir": "miniprogram",
      "baseUrl": "miniprogram",
      "paths": {
       "lib / *": ["./lib/*"]
     },
...
}

Note: If I don't add the outDir it gives me the following error: "compilerOptions.outDir is not set"

Then when importing it I do: import {Util} from "lib/my/path/util";

gogoonline · Answer 4 · 2023-03-30T20:09:22.087

first step. we need to install tsconfig-paths

npm i -D tsconfig-paths

second step. Create the nodemon.json file in the root path. same level with package.json

third step. Copy and paste the code below into the nodemon.json file. In the code, ./src/app.ts This part is an express execution point. Modify it according to your situation.

{
  "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
  "watch": ["src"],
  "exec": "node -r tsconfig-paths/register -r ts-node/register ./src/app.ts",
  "ext": "ts, js"
}

last step. write executing script code in the package.json file

"script": {
  "dev": "nodemon"
}

score 0 · Answer 5 · answered Mar 12 '21 at 00:52

Development

npm i -save-dev tsconfig-paths/register

tsconfig.json

{
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
}

package.json

"scripts": {
  dev: "ts-node -r tsconfig-paths/register src/index.ts"
}

Build

npm i -save-d ttypescript @zerollup/ts-transform-paths

tsconfig.json

{
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
 "plugins": [
      {
          "transform": "@zerollup/ts-transform-paths",
      }
  ],
}

package.json

"scripts": {
  build: "ttsc -P ./tsconfig.json"
}

score 0 · Answer 6 · answered Feb 01 '22 at 12:50

TL;DR: delete all .js files

For those who didnt manage the with correct solutions above:

With my project I had 'leftover' .js files created (at some point in the past) under each .ts file. running nodemon (which in turn should use tsc) did not overwrite those files, and I kept getting the same require stack errors with Cannot resolve module.

Removing all .js files fixed it for me.

Refer to this answer for more information on how to actually do it in a safe(ish) way: Find (and delete) all files with a specified extension. make sure you actually review the list of files before deleting them.

Typescript paths not working in an Express project

6 Answers6

TL;DR: delete all .js files

Linked