DEV Community

Cover image for Clean Up Your Imports using Absolute Imports & Alias on React apps (Next.js, CRA, and React-Vite)

Clean Up Your Imports using Absolute Imports & Alias on React apps (Next.js, CRA, and React-Vite)

Theodorus Clarence on June 18, 2021

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 quit...
Read full post
Collapse
 
kutsan profile image
Kutsan Kaplan •

Wasn't this enough? No need to add an entry everytime you create a folder.

{
  "compilerOptions": {
    // ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
theodorusclarence profile image
Theodorus Clarence • • Edited

Oh cool, just tried it and it works on Next.js, I remember it has some issue for the F12 look up but I think there is no problem now! Thanks for your addition, updated the blog.

It kinda messes with CRA auto import using that approach, will update if I found anything.

Collapse
 
abhayrana profile image
abhay-rana • • Edited

i have two jsconfig.json flie in my project one is for my reactjs and one is for my nodejs project
and it is always good to use special character before the folder path
the config i user for my backend :-

//the config i use for my backend :-
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": ["*"]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode 
//the config i use for my frontend :-

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "~/*": ["*"]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

Collapse
 
kutsan profile image
Kutsan Kaplan •

Looks good but I think tilde-slash prefix (~/) shouldn't be used for project-scoped aliases. ~/ means home directory for current user on unix-like systems. So, it is looking like an absolute path to me at the first glance.

Collapse
 
monkeyalex profile image
MonkeyAlex •

Great article.
Would it be possible to configure vite to understand absolute path WITHOUT using a prefix like (@)?

My vite project is created as React JS (not TS).

Previously with CRA + WebPack, I was able to specify this:

import Main from "Main";
import MyComponent from "components/level2/MyComponent";
Enter fullscreen mode Exit fullscreen mode

where my jsconfig.json looks like this:

{
  "compilerOptions": {
    "target": "es2020",
    "baseUrl": "src/"
  },
  "exclude": ["node_modules", "build"]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rutheshmuniraj profile image
Ruthesh Muniraj • • Edited

If you are facing "Dynamic required of 'path' is not supported" error in vite.config.js replace const path = require('path') with import * as path from 'path' this will fix the issue

and @vitejs/plugin-react-refresh is deprecated use import react from "@vitejs/plugin-react" instud.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "/src") }],
  },
  plugins: [react()],
});
Enter fullscreen mode Exit fullscreen mode
Collapse
 
consoletvs profile image
Erik C. Forés •

Sorry but what's wrong with?

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
theodorusclarence profile image
Theodorus Clarence •

It's really just preference

Collapse
 
yaireo profile image
Yair Even Or •

@vitejs/plugin-react-refresh is deprecated, maybe consider updating the article and removing it?

Collapse
 
rayhanns04 profile image
Hans •

Hii bro" i have fixed for new problem on React Vite without TS, just just chillin add ./ before src on alias (vite.config.js), and it will solve your problem.

Image description

Image description

Collapse
 
rizkimcitra profile image
R. Maulana Citra •

Awesome article bro, very helpful, thanks for sharing!

Collapse
 
snxk profile image
Sayan Mallick •

How to implement this in typescript? Do I just edit the tsconfig.json?

Collapse
 
omkar_k45 profile image
Omkar Kulkarni •

Yes. That would take care of it.

Collapse
 
hasnaindev profile image
Muhammad Hasnain •

This does not help with syntax highlighting, right?

Collapse
 
ijash profile image
Jastria Rahmat •

For Create React App without using Craco in latest version (v5.0.1) , absolute import doesn't work. it's a bug. please revise the post. github.com/facebook/create-react-a...

Collapse
 
mellunar profile image
mellunar • • Edited

I'm getting a MIME not allowed error when I change filepath to '@/filepath'
React JS + Vite