Uma forma simples para usar Absolute Imports no React + TS + Vite

Nas últimas semanas tenho participado de encontros de mentoria de ReactJS com uma turma pela Alura Empresas.

Nesses encontros criamos projetos a cada semana, normalmente usando o Create React App, mas dessa vez começamos usando o Vite, uma alternativa bem interessante ao CRA (teremos um artigo falando mais sobre o Vite em breve).

No decorrer da semana os alunos começaram o desenvolvimento do projeto e um dos alunos surgiu com um problema na hora de tentar usar o Absolute Import em seu projeto.
Ah, se não sabe o que é Absolute Import ou relative Import, sem desespero, teremos um artigo em breve falando sobre.

Voltando ao problema do aluno, podemos encontrar diversos artigos ou respostas no stackoverflow com possíveis soluções e foi então que encontrei um pacote que podemos instalar em nossas dependências de desenvolvimento e com poucas alterações no código e eles está funcionando perfeitamente.

A Solução feliz!

O pacote da vez é o vite-tsconfig-paths.
Ele ajudou de forma prática e simples dando ao Vite a capacidade de resolver importações usando o mapeamento absoluto.

Tá, mas como era antes?

Sem esse pacote, toda vez que fossemos importar algo em algum arquivo teríamos que fazer referencia a dependência de forma relativa ao arquivo.

Na imagem abaixo podemos notar o import do componente Header com aqueles '../../'. Ou seja, tínhamos que 'navegar' até o arquivo saindo e entrando nas pastas. Muito chato, né?

Porém com o Import Absolute resolvemos esse problema, e nossos imports ficam assim:

Muito mais prático, né?

Então vamos parar de enrolação e vamos aprender como instalar e configurar o pacote vite-tsconfig-paths.

Bora pra mão na massa!

Primeira coisa que temos que fazer é instalar o pacote em nossas dependências de desenvolvimento:
npm i --save-dev vite-tsconfig-paths

Após isso temos que adicionar o plugin no arquivo vite.config.ts:

E por ultimo, definir no arquivo tsconfig.json a url base do projeto dentro do objeto compilerOptions:

E com esses três passos nosso projeto já esta pronto para trabalhar com as Importações Absolutas. Só rodar o código e ser feliz!!!

TAMO JUNTO!!!