Fixing Vite Aliasing Issues in React + TypeScript

Dealing with long, cluttered import paths in a React + TypeScript project? Aliasing is a simple way to clean them up, making your imports shorter and your code easier to read. Vite makes it easy to set up aliases for deeply nested files, but sometimes you’ll still run into the dreaded "Cannot find module" error. If this issue familiar, here’s how to fix it.

The Problem

While working on a Vite + React + Typescript project, I ran into the error Cannot find module '@/components/Login.tsx' or its corresponding type declarations. I found this strange considering I’d already configured my vite.config.ts file to resolve the alias.

Here’s a snippet of the error.

The Fix

It turns out I only did half the work. Configuring the alias in the vite.config.ts is not enough. We need to do the same in the tsconfig.app.json file. We also need to define it in tsconfig.app.json.

Vite projects typically include multiple TypeScript configuration files:

• tsconfig.app.json
• tsconfig.json
• tsconfig.node.json

Vite's latest template is working with tsconfig.app.json. tsconfig.app.json overrides or extends tsconfig.json configurations to set configuration for app-specific purposes.

Why separate TS configs?

Vite projects require different TypeScript configurations for different environments:

1. Your app (src folder) runs in the browser.
2. Vite itself (including its config) runs in Node.js, a separate environment with different APIs and constraints.

That’s why there are separate configs, each defining its own include and exclude sections. The "master" config, tsconfig.json, ties them together.

Source: StackOverflow

With that in mind, let’s configure Vite and TypeScript to resolve aliases correctly.

First, update the resolve property to register your alias. If TypeScript complains about the path import, install the necessary types with: npm install -D @types/node.

// vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { URL } from "node:url";
import path from "path";
import { defineConfig, loadEnv } from "vite";

export default defineConfig((env) => {
  // code to handle env variables goes here

  return {
    // other code

    plugins: [react(), tailwindcss()],

    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  };
});

Next, we need to inform the Typescript compiler about the aliases we set. Make sure the path(s) in vite.config.ts and tsconfig.app.json match.

// tsconfig.app.json

{
  "compilerOptions": {
     // other compiler options goes here
     
     "paths": {
         "@/*": ["./src/*"]
       },
  },
  "include": ["src"]
}

After making these changes, restart the TypeScript server (or your development environment) to apply the updates.

By configuring both Vite and TypeScript properly, you can eliminate the "Cannot find module" error and enjoy cleaner imports. 🚀 If you run into issues, double-check that your paths match and restart your TS server.