Level Up Your Imports: Using Path Aliases for Cleaner React + TypeScript Projects 🚀

Hello Hive Community Members! 👋

Hope you're all doing fantastic! I'm back with Day 5 of my ReactJS learning series 🚀
This journey has been quite the rollercoaster, and today we're diving into something every dev struggles with — those ugly relative imports 😩

But before that, if you missed my earlier episodes, here's your cheat sheet 👇

📚 Catch Up on My React Adventures

• 📚 Day One: Fresh React app + AIOHA integration!
• 🧭 Day Two: Routing drama & rebellious NavBar 😤
• 🛠️ Day Three: Fixed Layouts, Routing & AIOHA 💥
• 🧠 Day Four: useState, useEffect, and .env headaches 😅
• 🔥 Today is Day Five: Let’s clean up those imports with path aliases!

🚀 Why Path Aliases?

Let’s face it —

import Button from "../../../../components/ui/Button"

is just plain ugly and hard to maintain 😵‍💫

While pairing up with another dev (shoutout to AI-generated code ✨), I noticed a cleaner import style — so I had to figure it out myself! Here’s how you can too 👇

🪄 Step-by-Step: Setting Up Path Aliases

🧠 Step 1: Update tsconfig.app.json

Add these compiler options to set your base path and alias:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ...other stuff
  }
}

⚙️ Step 2: Tweak vite.config.ts

Use path module to create an alias for @ pointing to your src folder.

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

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

🎉 Boom! You’re 90% done.

🔁 Step 3: Restart Everything!

• Stop your npm run dev server.
• Restart TypeScript in VS Code (click on the TS version and hit "Restart TS Server").
• Before starting again... do not skip step 4 🤣

✂️ Step 4: Update Your Imports!

Time to ditch the dot-dot-dot 🔪

Use beautiful imports like:

import Button from "@/components/ui/Button"

Isn’t that satisfying? 😍

📚 Sources That Helped (But Also Confused Me 😂)

• LogRocket Guide
• DEV Community Setup
• Max Martinez's Blog

Honestly... I followed these and ended up with TypeScript errors. So, the method described in this post is what actually worked for me! 🙌

Thanks for following along!
See you in the next post where I’ll probably break something else and then fix it (again) 😅

Stay curious & keep coding 💻💪

📝 Final Note

• I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
• Here is the link where you can find both original content & improvements made by AI
• https://chatgpt.com/share/68897d05-0eb0-8000-8f07-77280f4f2375

🚀 My Contributions to ♦️ Hive Ecosystem

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak