Absolute Import

Setting up Absolute Imports with jsconfig

––– views

Absolute Import is a great way to clean up your imports

Example

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

import Nav from '../../components/Nav';
jsx

And this is the clean import using absolute import:

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

For Next.js

Add this to root with the filename of jsconfig.json

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

Or you can just use my Next.js & Tailwindcss starter template


For Create React App

Add this to root with the filename of jsconfig.json

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

And in craco.config.js

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