Fixing Absolute Path Issues Made Easy: Vite, React, TS

Introduction

When working on a Vite React TypeScript project, you might encounter difficulties when trying to set up and use absolute path imports. In this article, we will address the common challenges faced and provide possible solutions to help you overcome this struggle

Understanding the Issue

The problem typically arises when attempting to import modules using absolute paths instead of relative paths. Absolute paths provide a cleaner and more intuitive way to import files, making the project structure more manageable. However, setting up and configuring absolute path imports in a Vite React TypeScript project requires some additional steps.

Quick and Easy Setup: Building a Vite Project with React and TypeScript

• Open your command line interface (CLI) and navigate to the directory where you want to create your Vite project.

• Run the following command to create a new Vite project with the react-ts template:

npx create-vite my-vite-app --template react-ts

Once the project creation is complete, navigate into the project directory:

cd my-vite-app

Install project dependencies by running:

npm install

Start the development server:

npm run dev

After setting up the necessary configurations for absolute path imports in my Vite React TypeScript project, including the following in my tsconfig.json:

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"]
    },

Followed by adding the following code to the SignUp component inside the components directory;

const SignUp = () => {
  return <div className="signup-container">This is a signup page!!</div>;
};

export default SignUp;

I attempted to import the SignUp component in the App.tsx file. However, I encountered an issue where the absolute path import was not working as expected.

import SignUp from "components/SignUp/SignUp";

Go to the App.tsx component and add the following;

import SignUp from "components/SignUp/SignUp";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <SignUp />
    </div>
  );
};

export default App;

I get this error;

whereas if I use relative path, the app works in dev & build mode without any error:

import SignUp from "./components/SignUp/SignUp";

How To Make Absolute Path Work in Vite React TypeScript project?

Here are some solutions to help you get absolute path imports working in your Vite React TypeScript project:

In the tsconfig.json file, we have defined the necessary compiler options and path aliases for absolute imports. After setting the "baseUrl" option to "./src" to specify the base directory for resolving module paths.

In order to support the path aliases defined in your tsconfig.json file, you need to make changes to your vite.config.ts file. You should update the alias configuration in your vite.config.ts to align with the aliases defined in tsconfig.json.

Update vite.config.ts file with this code;

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      components: "/src/components",
      layouts: "/src/layouts",
      pages: "/src/pages",
    },
  },
});

You can import path like this (or any module under ./src):

import SignUp from "components/SignUp/SignUp";
import Header from "layouts/Header/Header";

To achieve the import statements with the @ symbol, you can modify the alias configuration in your vite.config.ts file as follows:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@components": "/src/components",
      "@layouts": "/src/layouts",
      "@pages": "/src/pages",
    },
  },
});

Once you've set up absolute imports, you can start using them in your project. Here's an example of how to import a component using absolute import:

import SignUp from "@components/SignUp/SignUp";

Follow me

Comments

[jeffKibra]

thanks man. solution works

[featuresRain]

This is what described in vite docs. However in my case it's not working in all cases.

For example - I have this structure in react project:
src/shared/
src/shared/hooks/
hooks/index.ts -> export const useAppDispatch: AppDispatch = useDispatch
shared/index.ts -> export * from "./hooks"

And I want to import my useAppDispatch hook and mb a lot of other things from shared, but I can't do it by:

import { useAppDispatch, someOtherThing } from "@shared"

Instead I have to do:
import { useAppDispatch, someOtherThing } from "@shared/index"

How to solve that?

[Willochs Ojigbo]

npm install path --save-dev

Update your vite.config.ts to include the alias configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@shared': path.resolve(__dirname, 'src/shared'),
    },
  },
});

npm install --save-dev @types/node

Update tsconfig.json by adding "types": ["node"]

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "types": ["node"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* Absolute paths */
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@commons/*": ["commons/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[Igor Tashevski]

This is not working for default exports

[Willochs Ojigbo]

Thank you for reaching out, this generally work well with both name and default exports. Check your tsconfig.json and the configuration file vite.config.ts.
Feel free to reachout if you still encounter any challenge.

[Ajeet Kumar]

Thank you bro. This solution worked out for me. I had used tonnes of method but nothing worked out. I was trying this for last 4-5 days. You made as well as saved my Day. Lot's of Love from India.

[Willochs Ojigbo]

You're welcome! I'm glad to hear that the solution worked for you. 😊🚀

If you ever have more questions or run into issues, feel free to reach out.

[Evgeny Shurupov]

Thanks! You helped me!

[Willochs Ojigbo]

I'm glad I did