tsc - doesn't compile alias paths

Question

I have typescript and uses the aliases. Here is part of tsconfig.json

"compilerOptions": {
  "baseUrl": "./src",
   ...
},

By setting the base url, I can change

import User from "src/models/User.model.ts"

to

import User from "models/User.model.ts"

The problem is that tsc compiles src folder to dist folder, so User import path should be changed to the relative path something like this:

"../models/User.model.js"

But it doesn't change, so I get the following error:

"models/User.model.js" not found

I searched for the answer, but no luck.

Upheaval

Answer 1

TSC compiler alone can't resolve the alias paths. So in order to make it work you will be required to install additional dev package

npm install --save-dev tsc-alias

tsc-alias is for replacing alias paths with relative paths after typescript compilation of tsc compiler because the compiler alone can't resolve the alias paths

After that you need to modify your build command in your package.json file to

"build": "tsc && tsc-alias",

Running npm run build should work after that and the code should be compiled correctly to javascript

If you want to enable also hot reloading you will be required to install one more dev package

npm install --save-dev concurrently

concurrently is for runing multiple commands concurrently

After that you will need to add 1 new script inside your package.json file

"build:watch": "concurrently --kill-others \"tsc -w\" \"tsc-alias -w\"",

Running npm run build:watch should work after that and the code should be compiled correctly to javascript with hot reload functionality

Please Note: I am using this versions of the packages

"tsc-alias": "^1.5.0",
"typescript": "^4.5.5",
"concurrently": "^7.0.0",

Older or newer versions might introduce some issues with compiling the code

Mckelvey

Have been searching around for an hour, finally find a solution that works! Thanks so much! – Bain

this trick did it for me – Umbrage

this is safe my life – Barri

In the case of javascript without an extension in its import statement, apply the --resolve-full-paths parameter to the tsc-alias. – Anthracene

Good job man :)) – Torpor

Answer 2

There's a long discussion in typescript issues about this, and I can't seem find better solution than this.

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"
}

Mali

I tried this exact setup, and received the following error when building: Cannot read properties of undefined (reading 'impliedNodeFormat'). – Jone

Error is due to the fact that @zerollup/ts-transform-paths is broken for TypeScript 4.5+: github.com/zerkalica/zerollup/issues/37 – Sweater

I have the same issue on typescript 4.3.5 – Shuman

Answer 3

ttypescript

typescript-transform-paths

babel-plugin-module-resolver

package.json part

"build": "ttsc && babel dist -d dist",

ttsc is not a mistake, it's a plugin over typescript config for more complex transpiling

tsconfig.json part

"outDir": "dist",
"baseUrl": "./",
"paths": {
    "@/*": [
        "./src/*"
    ],
    "$/*": [
        "./tests/unit/*"
    ]
},
"plugins": [
    {
        "transform": "typescript-transform-paths",
        "afterDeclarations": true
    }
],

.babelrc whole content

{
  "compact": false,
  "retainLines": true,
  "minified": false,
  "inputSourceMap": false,
  "sourceMaps": false,
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./dist"],
        "alias": {
          "@": "./dist"
        }
      }
    ]
  ]
}

Proof

Explain what these repositories are for? – Heulandite

I think README files of those repo-s will help you) – Proof

This looks like it'd work just fine! Unfortunately, typescript-transform-paths doesn't work in TS 4.0: github.com/LeDDGroup/typescript-transform-paths/issues/68 – Samekh

The best alternative I've found so far is this: github.com/joonhocho/tscpaths – Samekh

@SeizeTheDay the support for TS 4+ was introduced a week after your comment 🎉 – Oxeyed

Answer 4

Turns out that it is very simple to resolve. As long as you define proper path within the path like this in file tsconfig.json

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

And not like this

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

And build (transpile TS to JS) using the command tsc && tsc-alias. It will work. Also make sure that you install typescript to enable tsc and tsc-alias to enable tsc-alias command above. You can do that by npm i --save-dev typescript npm i --save-dev tsc-alias.

Byars

Answer 5

Here's the solution I use:

• ttypescript
• @zerollup/ts-transform-paths
• tsc-watch

How:

Installation via npm:

npm install -D ttypescript @zerollup/ts-transform-paths tsc-watch

In tsconfig.json add:

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

In package.json the scripts look like this:

{
  ...
  "scripts": {
    "start": "node dist/server.js",
    "build": "ttsc",
    "watch": "tsc-watch --compiler ttypescript/bin/tsc --onSuccess 'npm start'",
    "watch-only": "ttsc -w",
    ...
  },
}

Jerkwater

Answer 6

You just need to tell the Node what the base url is with NODE_PATH environment variable so that it can resolve absolute paths:

NODE_PATH=dist/ node ./dist/index.js

Avan

is this all supposed to be assigned to NODE_PATH or was this supposed to be more than one cli entry? e.g.: $ NODE_PATH=dist/ $ node ./dist/index.js Also, is there a place this could be put in a config file or something? I suppose just as a preceding package.json script to run with the build script would work. – Lion

Answer 7

Here are the dev dependencies you need ts-node, tsconfig-paths and typescript-transform-paths and typescript configuration

{
  "ts-node": {
    "transpileOnly": true,
    "require": [
      "typescript-transform-paths/register",
      "tsconfig-paths/register"
    ]
  },
  "compilerOptions": {
    ...
    "plugins": [{"transform": "typescript-transform-paths"}]
  },
  ...
}

Beamends