Imports absolutos con React y Vite 🚀

Por lo general cuando nuestros proyectos en React empiezan a crecer nuestra estructura de carpetas empieza a ganar más anidamientos e importar archivos que se encuentran en otros directorios se torna así:

Esto hace que nuestro bloque de importaciones sea engorroso de leer y, si necesitamos cambiar alguna carpeta de lugar, se vuelve un dolor de cabeza ya que debemos analizar toda la ruta para evitar errores en la nueva importación.

Ahora bien, antes de entrar con la solución a este problema es importante entender qué es un import absoluto y qué es un import relativo.

IMPORT RELATIVO

Las importaciones relativas nos permiten traer archivos teniendo como punto de referencia la estructura propia de nuestro proyecto. Es decir, podemos importar archivos utilizando como punto de partida el archivo que define el import y navegar hacia el archivo objetivo por medio de ../.

IMPORT ABSOLUTO

Las importaciones absolutas nos permiten ya no tener como punto de partida el mismo archivo que necesita realizar la importación y, de esta forma, nosotros mismo navegar desde él hacia el archivo que deseamos importar sino que ahora utilizaremos una ruta raíz y desde ahí definiremos la ruta concreta a nuestro archivo objetivo, es decir, ya no navegamos desde el archivo que realizará el import hacia el archivo a importar sino que navegamos desde una ruta raíz definida hacia el archivo objetivo.

IMPORTS ABSOLUTOS EN REACT Y VITE

Cuando nuestro proyecto empieza a crecer es normal encontrarnos con estructuras de carpetas como esta:

¿Qué sucede cuando desde alguna página queremos acceder a un componente dentro de la carpeta components? si utilizáramos imports relativos caeríamos en el problema de tener un fila inmensa de ../../../../ hasta poder llegar a nuestro componente deseado. Debemos ahora cambiar esto a imports absolutos y para ello Vite nos provee una forma sencilla de hacerlo.

CONFIGURANDO VITE

Cuando generamos nuestro proyecto con vite se nos genera un archivo en la raíz llamado vite.config.js que luce así:

En este archivo debemos configurar nuestras rutas absolutas de esta forma:

Debemos usar la propiedad resolve para agregar un alias el cual es un array de objetos en donde cada objeto es una carpeta a la cual deseamos acceder desde cualquier parte de nuestro proyecto y no queremos utilizar un excesivo ../ para poder llegar a ella.

Dentro de cada objeto encontramos dos propiedades find: y replacement:. El primero es un string el cual nos permitirá nombrar ese alias para poder usarlo dentro de cada archivo que necesite usar la ruta absoluta. En nuestro caso usamos el @ cómo prefijo al nombre de la carpeta que queremos darle acceso absoluto desde cualquier parte de nuestro proyecto.

El segundo parámetro replacement: es la ruta desde vite.config.js la cual el alias representará. En nuestro caso recomendamos utilizar el modulo path y __dirname para normalizar este acceso desde la ruta raíz de cada maquina que ejecute nuestro programa.

Dicho esto nuestros imports pasarían de lucir así:

y ahora lucirían así:

Con Typescript

En el caso de utilizar typescript debemos realizar una configuración extra en nuestro archivo tsconfig.json:

Es importante resaltar que por cada alias agregado en el archivo vite.config.ts debemos agregar una propiedad más en paths dentro de tsconfig.json.

Eso es todo. Muchas gracias por leer.