How To Create Absolute Imports In Vite React App: A step-by-step Guide

Table of Contents

• Introduction

• The Problem

• Prerequisite

• Setting up the Vite React project for absolute imports

  • Creating a Vite React app
  • Configuring the project to use absolute imports
  • Configuring VS Code IntelliSense

• Practical Tips from Readers

• 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

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.

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.

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:

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.

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

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

Your vite.config.js should now look like this:

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:

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.

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:

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

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 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.