How to handle path imports in typescript using babel?

[antsmartian]

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?

[antsmartian]

I resolved this problem with this module: https://github.com/entwicklerstube/babel-plugin-root-import. This works great!

[antsmartian]

I'm keeping this issue open, I believe this issue needs to be fixed.

[tylim88]

I have the same issue, and I tried out babel-plugin-root-import as suggested, and it works

[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.

[tylim88]

@8of your solution only tell typescript where is base URL but it doesnt tell babel(by using @babel/preset-typescript we can compile ts file with babel) where is the base url

this is actually not a typescript issue but babel issue

[8of]

@tylim88 totally agree.

The alternative solution is useful for those who only need support for absolute path in the project.

Because in this case your actually don't need this module at all.

[tleunen]

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

[tylim88]

@8of @tleunen because we want to leave compilation to babel and use typescript just for type checking

there is a lot of useful babel plugin that typescript cannot provide

https://iamturns.com/typescript-babel/

[zanona]

I have to agree. Several libraries handle TS transpiling over to Babel since it's possible to have more control over the output and using plugins, etc. A few examples are Parcel and Expo. Without babel, the output would be rather limiting. I would vote for a deeper integration between tsconfig paths and babel-plugin-module-resolver, perhaps even by using tsconfig setup automatically.

[tleunen]

Not saying to stop using babel if you use TS. But you can use the alias/root system in TS alone without relying on this plugin anymore. At least that's the way I do now. I let TS do its magic to alias/root the import paths.

If you use Babel, with TS code. What do you use for babel to understand TS during compilation? The typescript plugin? So it will also read the tsconfig file anyway?

If you have TS code, you must compile down to JS at one point, unless I'm mistaken? So if you use TSC or Babel with the typescript plugin, they can both read your tsconfig file?

[tylim88]

@tleunen

in this case

transpilation is only handled by babel, not typescript, typescript only responsible for type checking

so during translation, tsconfig is not used, this is possible by using @babel/preset-typescript plugin which I mentioned earlier, the plugin take away all the typescript notation

more information can be found in the link I attached earlier

[tleunen]

Oh I see. I thought babel would read tsconfig through the plugin to know how to transpile, but they don't?

[tobiaseisenschenk]

My setup is a bit different from @antsmartian s, but I had the same issue with module-resolver not picking up my aliases (aka unable to resolve Module @mypackage/module ). I was able to solve it by adding the extenstions: ['.ts', '.tsx'] and root: ['.'] entries to my module-resolver setting!
This is actually also the recommended setup for react-native so I only had to follow the docs.
However my setup is a Bare Expo App with Typescript and I also use babel-preset-expo preset.
My dir structure looks something like:

• web-app
• native-app
• modules (to where my aliases point)
• tsconfig.json
• babel.config.js

[agilgur5]

This issue might be duplicative of #336 which does have some suggestions

[JoepKockelkorn]

As mentioned in #336, there is now a better plugin for this: babel-plugin-tsconfig-paths, which reads the paths from your tsconfig (configurable path) so you don't have to duplicate them in both the tsconfig.json and in the babel.config.js. Thanks @ricokahler.