Level Up Your Imports: Using Path Aliases for Cleaner React + TypeS...

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?

alias based import reference image

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!

Restart Typescript server

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 🔪

example updated import

Use beautiful imports like:

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

Isn’t that satisfying? 😍

📚 Sources That Helped (But Also Confused Me 😂)

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

Contribution	To	Hive	Ecosystem
Hive Witness Node	Hive API Node (in progress)	3Speak Video Encoder Node Operator (highest number of nodes)	3Speak Mobile App Developer
3Speak Podcast App Developer	3Speak Shorts App Developer	3Speak Support & Maintenance Team	Distriator Developer
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App