Configuring Absolute path in React Projects
Tags: react, reactnative, webdev, javascript
Published: 2022-12-24 10:38:01

Recently, I worked on a legacy codebase and looking into it I found out the imports were done using `relative` path, It was difficult to comprehend and also show errors when trying to copy the code from one file to another folder, thereby spending more time to resolve the import errors. In this article, I will explain how to use `absolute` path in your `CRA`, `Vite` and `React-Native` projects




![Legacy Upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3swfr41y3lrx4mh1dhy.png)
 **Table Of Contents**

*  [What is jsconfig.json ?](#what-is-jsconfigjson) 
*  Configuring Absolute path in:
     *  [Create React App](#how-to-configure-absolute-path-in-createreactapp) 
     *  [Vite](#relative-path-configuration-in-vite) 
     *  [React-Native](#relative-path-configuration-in-reactnative) 


### What is jsconfig.json?

The presence of `jsconfig.json` file in a directory indicates that the directory is the root of a `JavaScript` Project. In `jsconfig.json`, files belonging to the project and the files to be excluded from the project can be listed.

### How to Configure Absolute Path in Create-React-App

In the root of our folder, where we have `package.json` file, create a file called `jsconfig.json`. Add the following code

```javascript
{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"],
    "exclude":["node_modules,"build"]
}

```
👉🏼 By default the JavaScript language service will analyze and provide IntelliSense for all files in your JavaScript project. Its a good practise to exclude `node_modulues` , `build` , `dist` etc to speed up IntelliSense.  If you do not have a `jsconfig.json` in your workspace, VS Code will by default exclude the `node_modules` folder for you.

👉🏼 After adding the file, **You will need to restart your server for this to be effective** and we can reference the folders inside our `src` without error as shown below


![import_files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtf6gysuti0xt6xnln92.png)

### Relative Path Configuration in Vite

👉🏼 Here, we need to install a dependency `vite-jsconfig-paths` which gives `vite` the ability to resolve imports using `jsconfig.json` path mapping. open your terminal and run

```javascript
npm i vite-jsconfig-paths -D

```
👉🏼 After installation, we inject it into our vite app by adding it to our `vite.config.js` file as shown below

```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import jsconfigPaths from "vite-jsconfig-paths";


export default defineConfig({
  plugins: [react(), jsconfigPaths()],
});

```
👉🏼 After that, we create `jsconfig.json` file as shown in the react demonstration.

### Relative Path configuration In React-Native

👉🏼 For this, we use  `babel-plugin-root-import` library. lets install the package as below: 


```javascript
npm i babel-plugin-root-import -D

```
👉🏼 After installation, add the dependency to your  `babel.config.js` file.

👉🏼 Custom rootPathPrefix: By default, the import will be relative to the working directory of the process running babel. we can customized by using `~ `, ` @ ` or any other symbol. I will be using the `@ ` and our `babel.config.js` looks like this

```javascript

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "babel-plugin-root-import",
        {
          rootPathPrefix: "@",
          rootPathSuffix: "src",
        },
      ],
    ],
  };
};

```

👉🏼 If you don't like the `@ ` syntax you can use your own symbol (for example an `# ` symbol or ` \ ` or anything you want).

👉🏼 It is now possible to import your files using ` "@/" ` as a prefix. Here's an example below:

**Before**

![uploading images without config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1czbjtjh5k6lq24dpdj.png)


**After**


![After Adding config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chtgmv3i5qwmjyno5c15.png)

### Important Notice: After making the necessary changes in `babel.config.js`, Don't forget to restart your server.


Thank you for reading. I hope you've learned something new from this post. Want to stay up to date with regular content regarding **JavaScript**, **React**? Follow me ❤️ on  [LinkedIn](https://linkedin.com/in/isiakaabd).