Optimizing Path Management in Vite and Remix with vite.config
As projects grow, import paths become a mess. Deeply nested relative paths like ../../../components/Button slow you down and make refactoring painful.
4 May 2024

As projects grow, import paths become a mess. Deeply nested relative paths like ../../../components/Button slow you down and make refactoring painful.
I started using vite.config path aliases on a Remix project and it immediately cleaned things up. One config change, and every file in the project gets clean, predictable imports.
The trade-off is a small upfront cost: you configure aliases once, and you need to keep tsconfig.json in sync. But the payoff in readability and refactoring speed is worth it every time.
Text
import { vitePlugin as remix } from "@remix-run/dev"