Clean Up Your Imports using Absolute Imports & Alias on React apps (Next.js, CRA, and React-Vite)
Tags: nextjs, react, beginners, tutorial
Published: 2021-06-18 05:02:18

> Absolute Import is a great way to clean up your imports

Setting up absolute imports can be a lot of pain to search on the internet, I spend quite some time to make this work, so here is all of the setup I use to make it work, all in one blog.

## The problem

This is the usual way of importing with `..` operator to go back 1 folder:

```jsx
import Nav from '../../components/Nav';
```
In larger projects, this could be a nightmare.

And this is the cleaner import after using absolute import and alias:

```jsx
import Nav from '@/components/Nav';
```

You can also change the `@` symbol to whatever you want. Neat right?

There are 4 react apps setup I found on the internet, and I summarized all of those for you.
1. For Next.js Apps
2. For Create React App using Craco
3. For Create React App without using Craco (alias not available)
4. For React + Vite

---

## For Next.js

1. Add this to root with the filename of `jsconfig.json`

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"],
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
      // add more folders here
    }
  },
  "exclude": ["node_modules", ".next"]
}
```

Or you can just use [my Next.js & Tailwindcss starter template](https://clarence.link/next-starter) with all of the boilerplate set up.

[edit] It turns out in Next.js we can just write the first path like so:

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  },
  "exclude": ["node_modules", ".next"]
}
```

Credits to Kutsan Kaplan, I am not removing the original one, in case there are some problems about auto imports or F12 look up.

---

## For Create React App using Craco

> Only available if using Craco, usually we use Craco when also using Tailwind CSS, so no extra setup.

1. Add this to root with the filename of `jsconfig.json`

```json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "jsx": "preserve",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./components/*"],
      "@/pages/*": ["./pages/*"],
      "@/contexts/*": ["./contexts/*"],
      "@/routes/*": ["./routes/*"]
    }
  },
  "exclude": ["node_modules", "build"]
}
```

You need to update this file every time you create a new folder

2. And in craco.config.js

```js
const path = require('path');

module.exports = {
  // ...existing code
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};
```

---

## For Create React App without using Craco

Create React App only supports absolute import, but no alias

1. Add in jsconfig.json
```json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

The absolute import will only remove the relative path, but won't add `@/` alias.

For example:
```jsx
import Button from 'components/Button';
```

---

# For React Vite

(might be outdated)

1. Add this to root with the filename of `jsconfig.json`

```json
{
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": "./src",
    "paths": {
      "@/components/*": ["./components/*"],
      "@/pages/*": ["./pages/*"],
      "@/routes/*": ["./routes/*"],
    },
  },
}
```

You need to update this file every time you create a new folder

2. Also add this to root with the filename of `vite.config.js`

```js
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, '/src') }],
  },
  plugins: [reactRefresh()],
});
```

Or you can just use [my Vite + React + Tailwindcss starter template](https://clarence.link/vite-starter)


---

> Originally posted on [my personal site](https://theodorusclarence.com/?ref=devto), find more [blog posts](https://theodorusclarence.com/blog?ref=devto) and [code snippets library](https://theodorusclarence.com/library?ref=devto) I put up for easy access on my site 🚀