How to properly make module alias work when building the dist/build folder?

I was experimenting on module alias for typescript and it works during dev, but when I try to build it I always get cannot find module because it is pointing to src file even on build. I tried experimenting on different configs and searched all over but can’t still get it to work. I thought I should just ask here for advice.

Here is my project structure:

|-project
|---src
|-------index.ts  // (where I put require('module-alias/register');)
|-------app (business logic) // where I start using modules e.g import config from '@config/index.config';
|-----------index.ts
|-----------routes
|-------config
|---dist
|---node_modules
|---.env
|---.eslintrc
|---package.json
|---tsconfig.json
|---yarn.lock

Snippet of my package.json

"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
  "dev": "NODE_ENV=development ts-node-dev --respawn --transpileOnly ./src/index.ts",
  "prod": "yarn run build && node -r ./dist/index.js",
  "build": "NODE_ENV=production yarn run build-ts",
  "build-ts": "tsc -p .",
},  
"_moduleAliases": {
  "@config": "./src/config",
  "@util": "./src/util",
  "@middlewares": "./src/app/middlewares",
  "@routes": "./src/app/routes",
  "@controllers": "./src/app/controllers",
  "@models": "./src/app/models",
  "@helpers": "./src/app/helpers"
},

My tsconfig.json

{
  "compilerOptions": {
    "incremental": true,
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "suppressImplicitAnyIndexErrors": true,
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@config/*": ["config/*"],
      "@util/*": ["util/*"],
      "@middlewares/*": ["app/middlewares/*"],
      "@routes/*": ["app/routes/*"],
      "@controllers/*": ["app/controllers/*"],
      "@models/*": ["app/models/*"],
      "@helpers/*": ["app/helpers/*"]
    },
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true 
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

My .eslintrc (not sure if it matters or relevant to this problem)

{
  "extends": ["airbnb-typescript/base"],
  "rules": {
    "import/prefer-default-export": 0
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  }
}

Sample of how I use it

import logger from '@util/logger/generic.logger';
import { NextFunction, Request, Response } from 'express';

I hope you can help me point out where I went wrong with my config. Thanks a lot.

[PRossetti]

@rebirthtobi Thank you very much! This worked perfectly for me! Just two clarifications that could be helpful to someone having this same issue.

1. I had to remove the _moduleAliases from package.json (otherwise wasn’t working)
2. I didn’t use the if condition because in the example the same thing is done both in the if and else (like @Kehrlann said)

Just replaced this import 'module-alias/register';

for this

import moduleAlias from 'module-alias';
moduleAlias.addAliases({
  "@shared": `${__dirname}/shared`,
  "@modules": `${__dirname}/modules`,
  "@models": `${__dirname}/models`
});

[rebirthtobi]

For anyone having this issue, this is another way to do this, put it in the entry file at the top before other imports.

import moduleAlias from "module-alias";

if (process.env.NODE_ENV === "production") {
    moduleAlias.addAliases({
        "@shared": `${__dirname}/shared`,
        "@modules": `${__dirname}/modules`,
        "@models": `${__dirname}/models`
    })
} else {
    moduleAlias.addAliases({
        "@shared": `${__dirname}/shared`,
        "@modules": `${__dirname}/modules`,
        "@models": `${__dirname}/models`
    })
}