By using absolute imports, you can alias some folders to a name like below:
import {MyComponent} from ‘components/MyComponent’;
Absolute imports have some advantages.
- There is no
../../../../hell. Therefore easier to type out the imports. - Easily copy-paste the code with imports into another file in the project and not have to tinker with import paths.
- It is short and sweet
The below example is a file with Relative imports.
Make the imports in the above file prettier.
Therefore, how can you use absolute imports with ReactJs?
Using TypeScript
If you need to set up absolute imports in your Typescript application add/update your tsconfig.json file in the root directory of the project. Then you need to update the compiler option baseUrl in the file.
Using JavaScript
Setting up absolute imports to Typescript and setting up absolute imports to JavaScript is pretty much the same process. Create the jsconfig.json file in the root directory of the project. Then you need to update the following snippet.
Now you can import your components like this.
import {MyComponent} from ‘components/MyComponent’;
You can also use the compiler option paths as well. Perhaps you want to alias your component folder. For that, you need to set up your tsconfig.json, or jsconfig.json as shown in below:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@component/*": ["src/components/*"],
}
}
}
Now you can import the components from your component folder like this:
import {MyComponent} from ‘@component/MyComponent’;
is that enough?
Well, no… You need to make your IDE smart to understand absolute imports in your files. Here I am going to mention the progress for the top 2 IDEs. Those are VS Code and WebStrom.
For VS Code
VS Code is smart enough to understand the tsconfig.json, or jsconfig.json file. Intellisense and jump-to-source are just working fine with absolute imports.
Therefore, you can follow the above process.
For WebStrom / IntelliJ Idea
Select the src folder in the project window and right-click on it. Select the option Mark Directory as and then select the Resources Root option.
Now go to Settings -> Editor –> Code Style -> JavaScript and select the Imports tab. Then check the Use paths relative to the project, resource or sources roots.
Now WebStrom knows where the absolute imports are pointing. There won’t no warnings and autocomplete/ jump-to-source will work. This means the auto-import mechanism uses absolute imports.
If you are a strict developer like me, use something like Airbnb’s ESLint config.
With ESLint
Create React App also has an ESLint setup but it has a minimal set of rules. eslint-plugin-import is used by Airbnb and this plugin checks undefined imports. When you are going to use Airbnb’s ESLint config it will give you the error shown below:
You can fix the error by add settings prop in your ESLint config. That setting prop point that your imports might be relative to src folder. Therefore, you need to add update your ESLint config in .eslintrc file like this:
You don’t need to install any NPM modules to avoid the ESLint error, add the settings prop is enough.
By Convention
Absolute imports have been possible for a long time with Webpack. When you are naming your aliased folder, you need to use PascalCase/CamelCase because it is the convention follow in the Webpack.
