Absolute import in create-react-app

ashirbadgudu

Ashirbad Panigrahi

Posted on March 26, 2022

Absolute import in create-react-app

Want to get rid of the annoying, long, boring import statements in react?

import {Card} from './../../components/Card';
Enter fullscreen mode Exit fullscreen mode

Just create a jsconfig.json file in your projects root directory and the following code

{
    "compilerOptions": { "baseUrl": "src" },
    "include": ["src"]
}  
Enter fullscreen mode Exit fullscreen mode

Yaa it is that much simple to do now you can go into your file and replace the previous code with

import {Card} from 'components/Card';
Enter fullscreen mode Exit fullscreen mode

Make sure you restart the server after creating the jsconfig.json file


  • Now do you want create jsconfig.json file all of your projects in more efficient way?

  • Then Open up your project root directory in the terminal and run

npx react-jsconfig
Enter fullscreen mode Exit fullscreen mode

It will automatically generate the jsconfig.json file for you

Learn More About react-jsconfig

💖 💪 🙅 🚩
ashirbadgudu
Ashirbad Panigrahi

Posted on March 26, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related