-
Notifications
You must be signed in to change notification settings - Fork 203
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to handle path imports in typescript using babel? #387
Comments
I resolved this problem with this module: https://github.com/entwicklerstube/babel-plugin-root-import. This works great! |
I'm keeping this issue open, I believe this issue needs to be fixed. |
I have the same issue, and I tried out babel-plugin-root-import as suggested, and it works |
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 Insert Now you can use absolute paths in imports. |
@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 |
@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. |
If you already use typescript, you can drop any babel plugins for these resolutions and only use the typescript system. |
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. |
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? |
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 |
Oh I see. I thought babel would read tsconfig through the plugin to know how to transpile, but they don't? |
My setup is a bit different from @antsmartian s, but I had the same issue with
|
This issue might be duplicative of #336 which does have some suggestions |
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 |
In my
tsconfig
I have this:and in my codebase, I use the imports like:
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:
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?
The text was updated successfully, but these errors were encountered: