DEV Community

Cover image for Tired Of Relative Imports? Time To Get Rid Of Them!

Tired Of Relative Imports? Time To Get Rid Of Them!

Ludal 🚀 on May 14, 2021

At some point in your Javascript developer journey, you've certainly encountered these types of imports: import Car from '../../../vehicles/car'...
Collapse
 
valeriavg profile image
Valeria

While this method does work everywhere for TypeScript, it won't work for JavaScript without a bundler (especially NodeJS).
For NodeJS one could use NODE_PATH=./src node index.js to achieve similar results.

Collapse
 
adamcoster profile image
Adam Coster

This doesn't work for the JavaScript compiled by Typescript either, since the Typescript compiler doesn't rewrite import paths on compile. I ended up switching to Babel with the "Module Resolver" plugin for my Node projects (instead of using tsc) since being able to use path aliases is worth the annoyance of the extra dependency!

Collapse
 
christian102094 profile image
Christian Tapia

Spent several hours trying to configure it for Typescript. A real nightmare!

Thread Thread
 
valeriavg profile image
Valeria

Did you figure in the end? Otherwise try tsconfig-paths

Thread Thread
 
patarapolw profile image
Pacharapol Withayasakpunt

Can also be done with Babel, JavaScript also.

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

now this post is perfect👍

Collapse
 
iamludal profile image
Ludal 🚀

Thanks! I'm always using it with React, so I didn't think about this point. 🙏

Collapse
 
jcollum profile image
Justin Collum

This appears to be exclusive to VS Code. If so you should state that at the top.

Collapse
 
iamludal profile image
Ludal 🚀

You're right! Or with a bundler? I'm using it with React. 🤔

Collapse
 
prabhukadode profile image
Prabhu

Really useful

Collapse
 
big78113828 profile image
Big

in Create-React-App you can just edit your .env file and add

'NODE_PATH=src'

, assuming you're starting from the src/ folder.

Collapse
 
kettanaito profile image
Artem Zakharchenko

Path aliases are such a great feature, but setting it up on the TypeScript configuration level is not enough if you aim to reuse it across your devstack. I'm convinced there must be a higher medium to distribute alias settings, and that's why I'm pursuing the ".alias" project that allows you to defined path aliases and reuse them across all your tools (TypeScript, webpack, Jest, etc.):

github.com/open-draft/dotalias

Let me know what you think about it!

Collapse
 
gaurav5430 profile image
Gaurav Gupta

this works, but you also need to change settings in other tools used in your project which need module/path resolution. In my case, I needed to also enable this in webpack, storybook, jest, eslint

Collapse
 
iamludal profile image
Ludal 🚀

You're right, I'm using it with React (CRA or Next.js), so I didn't think about it. 🙏

Collapse
 
secretguard profile image
Info Comment hidden by post author - thread only accessible via permalink
Sarath G

Hello4

Collapse
 
secretguard profile image
Info Comment hidden by post author - thread only accessible via permalink
Sarath G

Hello3

Collapse
 
secretguard profile image
Info Comment hidden by post author - thread only accessible via permalink
Sarath G

Hello1

Some comments have been hidden by the post's author - find out more