Configuring Babel Root Import in TypeScript projects in ReactJS and React Native
April 25, 2020 • ☕️ 6 min read
Heeeeeey Codeeeeers
Today I came to bring a very cool solution for you who are tired of having to import into your TypeScript projects in ReactJS and React Native, like this:
import Header from '../../../../Components/Header'
How about … do this up there, turn this over:
import Header from '~/Components/Header'
Much better, right?!
Eu já havia trazido a solução do React Root Import para projetos em ReactJS utilizando JavaScript, e você pode ver aqui:
I had already brought the React Root Import solution for ReactJS projects using JavaScript, and you can see it here:
Using Babel Root Import in ReactJS
Soon, I will update and add the Root Import part of React Native for JavaScript projects as well.
⚛️ Root Import in ReactJS
Before you start it is recommended that you have ESLint configured in your project, if you haven’t already, GET OUT OF HERE, you can follow this tutorial I did a while ago and it will help you:
Configuring ESlint and Prettier on ReactJS and React Native
1. Install the babel-eslint
, babel-plugin-root-import
, customize-cra
, eslint-import-resolver-babel-plugin-root-import
and the react-app-rewired
as development dependency, in that way
yarn add babel-eslint babel-plugin-root-import customize-cra eslint-import-resolver-babel-plugin-root-import react-app-rewired -D
2. Then it is necessary to change the scripts
of start
, build
and test
in your package.json
, in this way
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
🎙️ Look that you just replaced react-scripts with react-app-rewired, this will not interfere with anything in your application, react-app-rewired with customize- cra, which we will see in a moment, only help us to overwrite some information from create-react-app so that he can understand babel-root-import when running the project.
3. Now, in the .eslintrc.json
, in the end of file, there is a "settings"
, if don’t have, you can create a one, it should be like this
"settings": {
"import/resolver": {
"typescript": {},
"babel-plugin-root-import": {
"rootPathPrefix": "~",
"rootPathSuffix": "src"
}
}
}
🎙️ Here is an example from my compelte file:
🗒 Note: Remember that the format is in JSON, if the file is in .js format, you just have to adapt it to JavaScript that works.
4. Create a file called config-overrides.js
at the root of the project and paste the following code into it
const { addBabelPlugin, override } = require('customize-cra');
module.exports = override(
addBabelPlugin([
'babel-plugin-root-import',
{
rootPathSuffix: 'src',
},
]),
);
🎙️ This file that will be responsible for implementing babel root import in React, in terms.
🎙️ It is very likely that ESLint will be “complaining” about an error that “customize-cra” should come on the production premises and not the development one, but it is not necessary, you can ignore it, it will not influence anything.
5. Create a file called tsconfig.paths.json
at the root of the project, and paste the following code into it
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
}
}
🎙️ This file will be responsible for overwriting some information from tsconfig.json, such as baseURL, which in my case is “src”, and I imagine yours too, if not , can change. Oh, and also the “paths”.
6. Finally, add the tsconfig.paths.json
that you created inside the tsconfig.json
that already exists in your application, like this
"extends": "./tsconfig.paths.json",
📱 Root Import no React Native
Before you start it is recommended that you have ESLint configured in your project, so you already know:
Configuring ESlint and Prettier on ReactJS and React Native
1. Install babel-eslint
, babel-plugin-root-import
, and eslint-import-resolve-babel-plugin-root-import
as a development dependency
yarn add babel-eslint babel-plugin-root-import eslint-import-resolver-babel-plugin-root-import -D
2. Now, in the .eslintrc.json
, in the end of file, there is a "settings"
, if don’t have, you can create a one, it should be like this
"settings": {
"import/resolver": {
"typescript": {},
"babel-plugin-root-import": {
"rootPathPrefix": "~",
"rootPathSuffix": "src"
}
}
}
🎙️ Here is an example from my compelte file:
🗒 Note: Remember that the format is in JSON, if the file is in .js format, you just have to adapt it to JavaScript that works.
3. Now access the babel.config.js
🎙️ Bellow:
presets: ['module:metro-react-native-babel-preset']
🎙️ Paste the code:
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '~',
rootPathSuffix: 'src',
},
],
],
🎙️ The file should look like this:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '~',
rootPathSuffix: 'src',
},
],
],
};
🎙️ This is just for babel to recognize babel root import, and of course, by setting the “src” folder as our root folder, if yours is not this you can change it, and also by configuring the ~ to be our prefix.
4. Finally, add the baseURL
options inside your compilerOptions
pointing to your root folder, mine is "src"
, and add path
, like this
"baseUrl": "src",
"paths": {
"~/*": ["*"]
}
🎙️ It is very likely that these baseURL and path options already exist within tsconfig.json, so, therefore, uncomment them and configure.
🗒 Note: They don’t need to be next to each other, so it’s just an example.
✅ Finishing
Well, that’s it, you may need to open and close VSCode or your other code editor for everything to work properly, but this way you should be able to import your files this way:
import Header from '~/Components/Header'
I hope this is useful for you, any questions, you can send me a message, see you next time!