Absolute import path

[Nohac]

Hi. I'm trying to setup absolute import path as I prefer that over relative paths.
So instead of import { AuthMiddleware } from "../../guards/AuthMiddleware";
I want to write: import { AuthMiddleware } from "src/guards/AuthMiddleware";

I've added the following to my tsconfig.json:

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

And for tests, I have added this to my jest.config.js:

module.exports = {
  ...
  moduleDirectories: ["node_modules", "<rootDir>"],
  ...
}

Now it works in my editor and for tests, but it does not work with ts.ed:

actions: ✗ yarn start
yarn run v1.22.19
$ babel-watch --extensions .ts src/index.ts
Error: Cannot find module 'src/guards/AuthMiddleware'
Require stack:
- /actions/src/controllers/v1/TaskUploadController.ts
- /actions/src/controllers/v1/index.ts
- /actions/src/Server.ts
- /actions/src/index.ts
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/actions/src/controllers/v1/TaskUploadController.ts:4:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at babelWatchLoader (/actions/node_modules/babel-watch/runner.js:58:13)
    at Object.reqExtensions.<computed> [as .ts] (/actions/node_modules/babel-watch/runner.js:69:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
babel-watch: Runner closed with { code: 1, signal: null }

Is there anything I'm missing to get this to work properly?

[Romakita]

Hello @Nohac
There is a good reason to not dot. Because it's INCORRECT !!!

If you build your app with tsc, the absolute path will be incorrect, because the path will be in dist or lib depending on your configuration.

And after you'll open an issue because your code doesn't work in production profile. so please use always relative path or use a workspaces to have modules (like "@project/shared"). this is why you have an error when you build your code with babel.
Isn't an issue with Ts.ED !!!!!!!!!

I won't help you to fix a bad practice ;)

[Romakita]

And your stack error proves what I'm saying:

$ babel-watch --extensions .ts src/index.ts
Error: Cannot find module 'src/guards/AuthMiddleware'

Theses two lines are enough to determine where the problem is.

I'm just curious, why you use babel if your code is deployed on a Node.js runtime. Babel is necessary in front-end but totally useless in Node.js 14+. I saying that because, Typescript take a time to compile code but you add a second parser with limited utility in this context.

So I'm curious to have a answer on it :)

[Nohac]

Sorry. I understand what the problem is, and I didn't directly state that it is a Ts.ED issue, but more that it is a use case that's been tackled and solved in other frameworks.
A few examples:
Vite: https://vitejs.dev/config/shared-options.html#resolve-alias
NextJS: https://nextjs.org/docs/advanced-features/module-path-aliases
CRA: https://create-react-app.dev/docs/importing-a-component/#absolute-imports

[Romakita]

No worries but You have mentioned directly Ts.ED:

Now it works in my editor and for tests, but it does not work with ts.ed:

So for your framework example I have an answer:

• Vite: Use Rollup to create alias (front-end)
• NextJS: use webpack and the correct configuration (front-end and back-end)
• CRA: Use webpack and the correct configuration (front-end)

Your examples all use bundlers to handle path resolution. You trying to applied front-end concept to a back-end framework :p

Babel doesn't provide natively a way to resolve alias module. But a plugin exists. See this thread:
https://stackoverflow.com/questions/58799049/how-to-use-babel-on-files-that-imports-using-path-aliases

Finally, this problem should have been addressed directly on google :)

[Romakita]

You can solve your issue by using webpack or the babel plugin mentioned in the stackoverflow and mark this topics as answered ^^

[Nohac]

As I've never created a javascript/node framework before, or used rollup/webpack or babel directly, I didn't know this wasn't a framework issue, but a bundler specific thing. The reason I say that the other frameworks I've mentioned support the use case is because they have explicit documentation for how to set it up. That is why I failed to google this problem.

Thanks for pointing me in the right direction, I'll look into the babel import plugin.

[Romakita]

Answered here: https://stackoverflow.com/questions/58799049/how-to-use-babel-on-files-that-imports-using-path-aliases