How to use absolute imports in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Deep folder structures in React applications lead to messy import statements with multiple ../../../ sequences that are hard to read and maintain.
As the creator of CoreUI with over 12 years of React experience since 2014, I’ve configured absolute imports for numerous large-scale applications.
React supports absolute imports through a simple jsconfig.json or tsconfig.json configuration that maps import paths to specific directories.
This approach transforms imports from ../../../components/Button to components/Button, making code much cleaner and easier to refactor.
Create a jsconfig.json file in your project root to enable absolute imports from the src directory.
Create jsconfig.json:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
For TypeScript projects, use tsconfig.json:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"components/*": ["components/*"],
"utils/*": ["utils/*"],
"hooks/*": ["hooks/*"]
}
}
}
Now use absolute imports in your components:
// Before: messy relative imports
import Button from '../../../components/Button'
import { formatDate } from '../../../utils/date'
// After: clean absolute imports
import Button from 'components/Button'
import { formatDate } from 'utils/date'
Best Practice Note
After creating jsconfig.json, restart your development server for changes to take effect. The baseUrl option sets the root for absolute imports. The paths option allows custom path aliases for better organization. This configuration works with Create React App, Vite, and Next.js without additional setup. This is how we structure CoreUI React templates—using absolute imports to keep component files clean and make large refactorings painless when reorganizing the folder structure.
