TSC after compilation to JS doesn't resolve alias module imports using tsconfig's path configuration

[CODE-MNA]

Context:

tsconfig Is config for tsc. You can set stuff like root dir from where all tsc files are supported for type checking this default congig. Tsc is a compiler, the vscode can use tsconfig and support typechecking/ other features like alias for imports.

Action:

I tried changing config to accommodate custom alias for contacts folder outside the backend package directory. I configured jest with ts aswell, added paths in tsconfig and in jest i added a modulenamemapper which resolves aliases and it worked. VSCode runs a Typescript checking process that reads tsconfig and shows errors based on that. I knew I correctly configured the path as the vscode recognised it.

Issue:

The issue is tsc is a compile time checker. Once it's compiled tp js it's done. And upon compiling, it didn't use path configuration to convert the aliases as in the built file, the imports (commonjs require was used) the path was still using @contracts the alias instead of the actual value of the path.
IF YOU GET ERROR LIKE "Cannot require module : @contracts/something" IT MEANS YOUR COMPILED CODE HAS ALIASES ALSO.

Possible Solutions:

Automate the process of finding require functions and reading their strings from js build, then if they match KEY in tsconfig path object, replace the string with the value that corresponds to the key.

• We can use tsc-alias to handle this as it resolves path config at runtime. The purpose of tsc is just to check first (it will just assure the alias makes sense then compile but it won't actually replace the alias after compiling) so we have to use another tool.

[CODE-MNA]

Summary - Backend TS-Compiled NodeJS code Module aliasing issue

This report outlines the efforts made to resolve module aliasing issues in the project setup. Despite attempting various methods, including tsconfig-paths integration and manual configuration in tsconfig.json, the issue persisted.

Attempts

1. Using tsconfig-paths
   A custom script was developed to utilize tsconfig-paths for resolving module aliases. However, despite loading the script before index.js, this approach failed to resolve the aliasing issues.

2. TSC-Alias Integration
   Subsequently, tsc-alias was introduced to automate alias resolution after compiling TypeScript to JavaScript. Unfortunately, even with this tool, aliasing issues persisted, preventing successful module resolution.

3. Tried adding some config in the tsc-alias section that copied tsconfig, also tried adding another alias this time pointing in a child directory to see if it's an issue of module being outside npm package directory :

  "baseUrl": "./",
    "paths": {
      "@contracts/*":["../contracts/*.ts"],
      "@shared/*":["src/shared/*.ts"] // module inside tsconfig root directory
    }

Issue Analysis

I tried the steps and not even tsc-alias was working with this path. I added a debug option to tsc-alias command to see the errors. It logged repeated paths like "contracts/contracts/*ts" and couldn't find the module because of this hence didn't replace alias. I tried alot of different ways to fix this/ different libraries etc.

Resolution

Tsc-alias worked at the end. So I kept the tsc-alias automated running step in the npm build script (runs after building the js files to replace the require import strings). The fix to the problem of the path was removing the .ts at the end of the paths in tsconfig file.

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

Additional Notes

In cases of errors related to duplicate imports, it is advisable to remove the contracts folder from the includes option in the tsconfig.json file.
Regular testing and validation of the alias configuration are recommended to ensure consistent and reliable module resolution.

[CODE-MNA]

Committed code that configures backend module aliasing and front-end as well.
We have vite as front-end tool so it was easy to do, installed a vite plugin that takes in path from tsconfig and generates proper path for aliases on build.

#e007983 resolved the backend module alias issue.