At some point in your Javascript developer journey, you've certainly encountered these types of imports:
import Car from '../../../vehicles/car'...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.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!
Spent several hours trying to configure it for Typescript. A real nightmare!
Did you figure in the end? Otherwise try
tsconfig-paths
Can also be done with Babel, JavaScript also.
now this post is perfect👍
Thanks! I'm always using it with React, so I didn't think about this point. 🙏
This appears to be exclusive to VS Code. If so you should state that at the top.
You're right! Or with a bundler? I'm using it with React. 🤔
Really useful
in Create-React-App you can just edit your .env file and add
'NODE_PATH=src'
, assuming you're starting from the src/ folder.
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!
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
You're right, I'm using it with React (CRA or Next.js), so I didn't think about it. 🙏
Hello4
Hello3
Hello1