Usando Absolute Imports em React (JavaScript e TypeScript)
Tags: braziliandevs, tutorial, react, programming
Published: 2023-03-02 19:18:14

Quando a gente começa a desenvolver com JavaScript _vanilla_, mais cedo ou mais tarde, nos deparamos com o conceito de _modules_ e entramos no mundo da importação de arquivos com os famosos `import` e `export`. Nesse momento, a gente não faz ideia de que ao entrar em uma biblioteca como **React**, boa parte da experiência vai contar com importações e exportações de componentes, páginas, módulos e afins. E essas importações, por padrão, são **relativas**.

<mark>Importações relativas</mark> levam em consideração a localização (ou caminho de pasta) de um arquivo em relação ao outro, ou melhor, **a localização do arquivo que você quer importar em relação à localização do arquivo em que você quer importá-lo**.

![Nazaré Tedesco confusa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb8jv6si7pd4nrvh7v5u.gif)

Vamos fazer uma breve introdução sobre caminhos relativos de pastas, mas caso você queira ir direto ao ponto, basta usar o sumário abaixo.

> **_Sumário_**
> _[Relative imports](#relative-imports)_
> _[Absolute imports](#absolute-imports)_
> _[Usando absolute imports com Create-React-App](#usando-absolute-imports-com-createreactapp)_
> _[Usando absolute imports com Vite](#usando-absolute-imports-com-vite)_
> _[Conclusão](#conclusão)_

---

### Relative imports

Imagine que você tem a estrutura de pastas abaixo e que você está trabalhando no arquivo _Home/index.js_, e neste arquivo você precisa importar os arquivos _HookUseReducer.js_ e _HookUseState.js_.

![Estrutura de pastas de um projeto React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0d7w1fb46ulqnld05jb.JPG)

Ao fazer essas importações no React, automaticamente elas serão relativas e escritas da seguinte forma:

```js
import { HookUseReducer } from "../../components/HookUseReducer"
import { HookUseState } from "../../components/HookUseState"
```

Perceba que é necessário fazer uso do `../` para indicar que nosso caminho de pasta “saia” da pasta atual (`/Home`) para um nível acima (`/pages`) e novamente mais um `../` para “sair” de `/pages` para `/src`. A partir daí, “entramos” na pasta `/components` e, depois, acessamos os arquivos.

Agora, imagine se você tiver um arquivo com uma estrutura de pastas muito mais complexa que esta. As importações relativas acabam sendo verbosas e mais complicadas de ler e entender à medida que aumentamos a complexidade dessa estrutura. E com o objetivo de simplificar essas importações e ter uma leitura mais imediata, podemos configurar nosso projeto para usar importações absolutas.

---

### Absolute imports

Recurso lançado na [versão 3.0.0 do create-react-app](https://github.com/facebook/create-react-app/releases/tag/v3.0.0), as <mark>importações absolutas</mark> levam em consideração a localização do arquivo que estamos importando em relação à raiz do projeto, evitando dessa forma que precisemos usar o `../ `para navegar entre pastas e arquivos. Veja como nossa importação fica bem mais simples e mais compreensível:

```js
import { HookUseReducer } from "components/HookUseReducer";
import { HookUseState } from "components/HookUseState";
```

Usar **absolute imports** em seu projeto traz algumas vantagens, sendo o mais óbvio o que citamos acima. No entanto, caso você precise usar os mesmos arquivos, módulos ou componentes em vários arquivos diferentes, você pode simplesmente copiar e colar as linhas de importações que elas funcionarão em qualquer lugar, sem precisar ser reescritas ou corrigidas.

Além disso, dependendo da sua <abbr title="Integrated Development Environment">IDE</abbr> ou editor de código, caso não esteja utilizando a função _autocomplete_, seu código fica mais limpo e mais fácil de escrever, além de ser mais fácil identificar onde o arquivo está salvo apenas ao olhar a linha de importação.

---

### Usando absolute imports com Create-React-App

[De acordo com a documentação oficial](https://create-react-app.dev/docs/importing-a-component/#absolute-imports), nós podemos usar importações absolutas com <abbr title="Create-React-App">**CRA**</abbr> criando um arquivo _jsconfig.json_ na raiz do nosso projeto. No caso de projetos em **TypeScript**, usamos o arquivo _tsconfig.json_, que já vai existir por padrão na raiz do projeto.

Para o **JavaScript**, salve o arquivo _jsconfig.json_ com o conteúdo abaixo. Assim, basicamente indicamos que a raiz do nosso projeto será a pasta `/src` e que ela já estará implicitamente incluída nos caminhos de pasta:

```json
{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}
```

Se você estiver usando **TypeScript**, abra o arquivo _tsconfig.json_ que já existirá na raiz do seu projeto. Nesse arquivo, nenhum conteúdo existente deverá ser modificado, você deve apenas acrescentar o seguinte código:

```json
{
    "compilerOptions": {
        // código já existente aqui
        // acrescentar as linhas abaixo:
        "baseUrl": "src"
    },
    "include": ["src"]
}
```

Após a configuração acima, pode ser necessário reiniciar sua IDE ou editor de código. Caso você já tenha importações relativas em seu projeto, basta deletar os `../` existentes e tudo deve funcionar normalmente. Simples, não?

---

### Usando absolute imports com Vite

Vimos acima que as importações absolutas são um recurso criado pelo CRA. No entanto, tem aumentado o número de devs que utilizam [**Vite**](https://vitejs.dev/) em seus projetos e a configuração acima acaba sendo incompatível com essa ferramenta. Então, como procedemos?

Felizmente, temos dois pacotes NPM que nos permitem usar importações absolutas no **Vite**, tanto com JavaScript quanto com TypeScript: o [vite-jsconfig-paths](https://github.com/EliezerSPP/vite-jsconfig-paths) e o [vite-tsconfig-paths](https://github.com/aleclarson/vite-tsconfig-paths), respectivamente. A configuração pelo Vite requer algumas linhas de código a mais, mas nada complicado.

Para usar os pacotes acima, primeiramente é necessário instalá-los com `npm i vite-jsconfig-paths` ou `npm i vite-tsconfig-paths`. Após instalar os pacotes, precisaremos injetá-los na aplicação através da criação de um arquivo _vite.config.js_ (para JavaScript) ou _vite.config.ts_ (para TypeScript). Insira o conteúdo abaixo no arquivo:

```ts
// Para o vite.config.js
import { defineConfig } from 'vite'
import jsconfigPaths from 'vite-jsconfig-paths'

export default defineConfig({
    plugins: [jsconfigPaths()],
})


// Para o vite.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
})
```

E, por último, apesar de não ser dito na documentação dos pacotes, é **necessário criar os mesmos arquivos com os mesmos conteúdos que citamos lá na configuração com create-react-app**. Agora é só reiniciar sua IDE ou editor de código (caso necessário) e começar a usar importações absolutas também no Vite!

> _**Nota adicional:** é possível que, caso você utilize o ESLint na configuração <mark>AirBnb</mark> (com Vite ou CRA), você pode ter o erro `ESLint: Unable to resolve path to module...`. Para resolver esse erro, você pode editar o seu **eslint-config.json** para que ele aceite caminhos relativos à pasta `/src`:_

```json
{
  "eslintConfig": {
    "extends": ["react-app", "airbnb"],
    "settings": {
      "import/resolver": {
        "node": {          
          "paths": ["src"],
          "extensions": [".js", ".jsx", ".ts", ".tsx"]
        }
      }
    }
  }
}
```

---

### Conclusão

Apesar de trabalhar com o **VS Code**, que facilita bastante a vida do dev, tenho usado **absolute imports** em projetos recentes e fico bem satisfeita com a limpeza do código e a facilidade de leitura que esse recurso traz. Além disso, para arquivos muito próximos na sua estrutura de projeto, ainda é possível utilizar relative imports sem problema algum, caso você queira fazer uso de ambos em vista de um código mais limpo ainda. Um xero!

---

**_Fontes:_**
- _[Github: Create-React-App](https://github.com/facebook/create-react-app/releases/tag/v3.0.0)_
- _[Create-React-App: Absolute Imports](https://create-react-app.dev/docs/importing-a-component/#absolute-imports)_
- _[Github: vite-jsconfig-paths](https://github.com/EliezerSPP/vite-jsconfig-paths)_
- _[Github: vite-tsconfig-paths](https://github.com/aleclarson/vite-tsconfig-paths)_
- _[KUMAR, Aman — Making Life Easier with Absolute Imports — React in Javascript and Typescript](https://medium.com/geekculture/making-life-easier-with-absolute-imports-react-in-javascript-and-typescript-bbdab8a8a3a1)_