DEV Community

Discussion on: Clean Up Your Imports using Absolute Imports & Alias on React apps (Next.js, CRA, and React-Vite)

Collapse
 
kutsan profile image
Kutsan Kaplan

Wasn't this enough? No need to add an entry everytime you create a folder.

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
abhayrana profile image
abhay-rana • Edited

i have two jsconfig.json flie in my project one is for my reactjs and one is for my nodejs project
and it is always good to use special character before the folder path
the config i user for my backend :-

//the config i use for my backend :-
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": ["*"]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
//the config i use for my frontend :-

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "~/*": ["*"]
        }
    }
}

Enter fullscreen mode Exit fullscreen mode

Image description

Collapse
 
kutsan profile image
Kutsan Kaplan

Looks good but I think tilde-slash prefix (~/) shouldn't be used for project-scoped aliases. ~/ means home directory for current user on unix-like systems. So, it is looking like an absolute path to me at the first glance.

Collapse
 
theodorusclarence profile image
Theodorus Clarence • Edited

Oh cool, just tried it and it works on Next.js, I remember it has some issue for the F12 look up but I think there is no problem now! Thanks for your addition, updated the blog.

It kinda messes with CRA auto import using that approach, will update if I found anything.