DEV Community

Charles πŸ›°
Charles πŸ›°

Posted on

Absolute imports (in react)

Hey there, some time ago i found my self with imports like this:

import Card from "../../../components/card";
Enter fullscreen mode Exit fullscreen mode

Which is quite a mess and not clear at all.

But here is where absolute imports came to rescue me.

The first thing we have to do is create a file, if you`re using **javascript **the name of your file will be jsconfig.json
and the file have to be at the same level as package.json.
Inside of it we will add this


{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

If you`re using typeScript you already should have the file which is tsconfig.json and you will have to add

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

Now that we have out jsconfig.json file set up we can do our imports.

Top comments (0)