Configuring Absolute path in React Projects

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

Table Of Contents

• What is jsconfig.json ?
• Configuring Absolute path in:
  • Create React App
  • Vite
  • React-Native

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

{
    "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

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

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

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:

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

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

After

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.