React JS imports made easy with Absolute paths using jsconfig.json

Photo by George Bakos on Unsplash

I desperately wanted to get rid of relative paths like “../../../components/Blah” from most of my react application files.
It makes me uncomfortable to see that in the list of imports.
Make react app code more readable with absolute paths. Get rid of relative paths.

Absolute paths for adding components from where without drilling backwards was my need and achieved it adding “jsconfig.json” file. No npm installation required.

ref: https://create-react-app.dev/docs/importing-a-component#absolute-imports

Fortunately this is it. You need to follow simple steps as below enable usage of absolute paths:

1. Add jsconfig.json file in the root of your project (next to /index.js file of your create-react-app)
2. Add below code in your jsconfig.json file.
3. Kill the react app if it is already running.
4. Start your react app using command “npm start”.

{
“compilerOptions”: {
“baseUrl”: “src”
},
“include”: [“src”]
}