How To Create Absolute Imports In Vite React App: A step-by-step Guide
Tags: webdev, react, tutorial, beginners
Published: 2023-02-24 16:28:35

## Table of Contents

- [Introduction](#introduction)
    
- [The Problem](#the-problem)
    
- [Prerequisite](#prerequisite)
    
- [Setting up the Vite React project for absolute imports](#setting-up-the-vite-react-project-for-absolute-imports)
    
    - [Creating a Vite React app](#creating-a-vite-react-app)
        
    - [Configuring the project to use absolute imports](#configuring-the-project-to-use-absolute-imports) 
        
    - [Configuring VS Code IntelliSense](#configuring-vs-code-intellisense)

- [Practical Tips from Readers](#practical-tips-from-readers)
        
- [Conclusion](#conclusion)
    

## Introduction

Relative imports are the default way to reference source files in JavaScript projects. However, as the codebase becomes more extensive and complex, it can become difficult to locate the correct source file when you need to make changes or during debugging. Absolute imports provide a clear and consistent way to locate and reference source files, making organising and maintaining your project easier.

In this guide, I will teach you how to create absolute imports in a Vite-powered React app, step by step. I will also teach you how to set up your project, configure the `Vite.config.js` file to resolve absolute imports in your app, how to import components using absolute paths, and how to configure vscode Intellisense to recognize absolute imports. By the end of this guide, you'll have learnt how to configure and use absolute imports in your Vite React app.

## The problem

When building applications in React, depending on the level of complexity and file structure, an import statement could end up looking like this `import Button from "../../../components/Button";` when importing components: 

If during reorganization, the `Button` component is moved to a new folder, the app breaks down because the app can no longer locate the `Button` component in the current import path. Therefore, the import path needs to be updated to reflect the change. 

To fix it, an extra `../` is added to enable the app locate the `Button` component. This means that, whenever there is a change in the codebase all the import statements relating to the changed file will have to be updated. This could lead to longer time spent trying to locate a component when debugging the app. 

Absolute imports on the other hand, reference source files using a fixed file path, regardless of the location of the file making the import. Absolute imports make it easier to locate the source file you're looking for, especially in larger codebases. In a Vite-powered React app, you can create absolute imports by configuring the `Vite.config.js` file to to resolve absolute imports in your app. For example the same `Button` component can be imported using the the absolute path syntax below:

 `import Button from "src/components/Button;` 

## **Prerequisite**

- The reader should have both Nodejs and Vite installed
    
- The reader should be familiar with the es6 import and export syntax.
    
- The reader should also know the basics of react
    

## **Setting up the Vite React project for absolute imports**

To set up a Vite React project for absolute imports, you'll need to first create a React app using Vite. I will quickly walk you through the process below:

### Creating a Vite React app

To create a Vite React app, simply run the below command in the command line:

`npm create vite@latest – –template react demo-app`

The command will create a boilerplate code for our react app. I named mine `demo-app`. You can name yours any name you want. Next, we move into our project directory by running the below code in the command line:

`cd demo-app`

Once you're in the project directory, run the below command to install all the necessary dependencies needed for the app to work

`npm install`

After the dependencies have been installed, simply run the command below to start up the development server

`npm run dev`

If you followed the instructions correctly, you should be seeing the below image in your browser

![Starting page of a Vite-powered React app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zoa3k2jpefpop6xc0dx1.png)

Let's make some changes to the project. Create two new folders named `components` and `pages` respectively in the `src` directory. In the `components` directory create a new folder named `Button`. In this new folder, create a new file named `Button.jsx`, copy and paste the below code in it and save the file. 

```javascript
function Button() {
  return (
    <button>Random Button</button>
  )
}

export default Button
``` 
Also create a new folder in the `pages` folder named `Home`. In this new folder, create a new file named `Home.jsx`, copy and paste the below code in it, then save the file.

```javascript
function Home() {
  return (
    <>
      <h1>This is The HomePage</h1>
    </>
  );
}
export default Home;
```
The next step, is to replace the boilerplate code present in the `App.jsx` file with the code below:
```javascript
import "./App.css";
import Home from "./pages/Home";

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

export default App;
```
With this changes saved, this is what you should now see in your browser.

![Updated web view after changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6nhdnksy8kwj1fl3ffz.png)


### Configuring the project to use absolute imports
To configure your app to use absolute import, you need to make some changes to the `vite.config.js` file, which is found at the root of your project directory.

Add  the code below to the `vite.config.js` file

```javascript
resolve: {
    alias: {
      src: "/src",
    },
  },
```

Your `vite.config.js` should now look like this:
```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: "/src",
    },
  },
});
```
The development server will restart once you save the file. Now that absolute import has been configured for the project, any file can be imported using the alias created in the `vite.config.js` file.

Here's an example of how the `Button` component in our app can be imported:

```javascript
import Button from "src/components/Button/Button"
```
Now, whenever vite sees `src` at the beginning of our import path during the development or build process, it is resolved to `./src` because of the configurations in the `vite.config.file`. This makes it easier to locate the component, even as your codebase grows.

### Configuring VS Code IntelliSense
Currently, when you try to import the `Button` component, VS Code intelliSense still suggest file paths using relative path.

For example if you try importing the `Button` component in our `Home` page in the `pages` folder. VsCode still uses the relative import syntax to suggest the location of the component.

![A gif showing VsCode relative path intelliSense suggestions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4pkie0oyd3kisx9qa5k.gif)

This is because we have not yet configured VsCode intelliSense to recognize absolute import paths. To configure VS Code intelliSense, you simply need to create a new file named `jsconfig.json` in the root directory of your project and add the following code to the file: 
```javascript
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["./src/*"],
    }
  }
}
```
The intellisense configurations for your Vscode will automatically be updated once the file is saved. Now, when the `Button` component is being imported again, the file path suggestion provided by VsCode intelliSense is the absolute import path.

![A gif showing VsCode intelliSense using absolute path for suggestions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbx80jcj87x21nyqyc0f.gif)


## Practical Tips from Readers
This section was added to spotlight helpful tips provided by readers that might otherwise get lost in the comment section.

- This [tip](https://dev.to/divensky/comment/2bg2m) by @divensky, is a good solution for fixing issues with Typescript not recognizing path aliases 

## **Conclusion**
By following the steps outlined in this guide, you have learnt how to set up a vite React app, how to configure the `vite.config.js` file to resolve absolute paths in your app, how to import components using absolute imports and how to configure VsCode intellisense to recognize absolute import path in your app.