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?
[IMAGE: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0CR3DzviuaOFn-0m6LJEIU1Ln64ziPcB5EQ&s]
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 devserver. - 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 😂)
> 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🙌 Support Back
❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️
Vote For Witness [IMAGE: https://images.hive.blog/u/sagarkothari88/avatar] sagarkothari88 @sagarkothari88 [IMAGE: https://images.hive.blog/u/threespeak/avatar] threespeak @threespeak