How to handle path imports in typescript using babel?

In my tsconfig I have this:

"paths": {
"@app/*": ["public/js/app/*"]

and in my codebase, I use the imports like:

import "@app/test"

Everything works fine. But I’m trying to do server side rendering in Node and tried to import the typescript component. My babelrc looks like:

{
    "presets": [
        "@babel/preset-env"
        "@babel/react",
        "@babel/preset-typescript"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties",
                "transform-class-properties","@babel/plugin-transform-modules-commonjs",
    ["module-resolver", {
              "alias": {
                "root" : ["./public/js/app"],
                "@app": ["public/js/app"],
                "extensions": [".tsx",".ts"],
                "loglevel": "warn",
              }
            }]],
    "compact": true
}

And I have my node code registered with babel-register, however I do get error like

Error: Cannot find module '@app/test'

Looks like paths are not getting resolved. How can I solve this issue? Am I missing something here?

[8of]

For anyone who uses TypeScript and just wants to use import with absolute paths without aliases.

Assuming all of your code folders are inside of src.

Insert "baseUrl": "src" in compilerOptions object inside tsconfig.json.

Now you can use absolute paths in imports.

[tleunen]

If you already use typescript, you can drop any babel plugins for these resolutions and only use the typescript system.