How to set up absolute imports with Create React App 3
You are working with React, you have created your application using create-react-app and after the first couple of hours of development you notice that your imports look like this:
It would definitely be easier if we can just type out the paths.
With the release of Create React App 3, this can be done without ejecting the application or using third-party libraries.
All you need to do is create a file named jsconfig.json (tsconfig.json if you are using typescript) in the root of your project and put this as content:
Done! Your app is ready for absolute imports. Now that the base URL is set to src, you don’t have to navigate the application to find a module and import it!
Here’s how the imports with absolute paths will look like:
A few extra steps are needed if you are using WebStorm because it assumes that absolute paths are in node_modules so we need to tell our IDE that we are using absolute import.
First, we need to mark src as Resources Root: right-click on src folder > Mark Directory as > Resource Root.
After that: Settings > Editor > Code Style > Javascript, go to the Imports tab and check Use paths relative to the project, resource, or sources roots.
Now you are all set! Happy coding!
