One of the things I miss about React / React Native is the absolute path. It is very common to use relative paths to import files.
The problem is when the project grows and the folders are deeply nested, I believe you may have already seen or already done so:
../../../.../../../../Utils/Breadcrumbs.js
../../../../../Components/Form/TextField.js
Now imagine that the Utils folder has changed directory. π’
To resolve this issue, use a library called Babel Plugin Root Import. With a list that can be used to encode the root of our application, which is a "src" folder. π
It is practicing that you learn
β Add the library to your project.
babylu@Project: ~$ yarn add babel-plugin-root-import -D
ou
babylu@Project: ~$ npm install babel-plugin-root-import -D
β After installation, set up the babel.config.js file that is located in the root directory.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '@',
rootPathSuffix: 'src'
}
]
],
env: {
production: {
plugins: [
'babel-plugin-root-import',
{
rootPathPrefix: '@',
rootPathSuffix: 'src'
}
]
}
}
};
With everything set up, it is now possible to import your files using "@" as a prefix. Here's an example below:
@/Components/Form
@/Pages/Auth/SignIn
A pinch of VueJS please π²
I am using the "@" copying the Vuejs. Use the prefix that you find interesting. It can be the '~' or '#' for example.
Excuse me, could you show me the Way? πΆ
Using this technique we will have our first problem, the absence of autocomplete. This is because VSCode still does not understand that the "@" refers to the "src" folder of our project. To solve this we will create in the root directory a configuration file that VSCode understands, called jsconfig.json.
Inside it include the settings below:
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules"]
}
Learn more about the jsconfig.json file:
https://code.visualstudio.com/docs/languages/jsconfig
Agora sim! π
A tool that likes to complain! π‘
If you are using eslint in your project, you will receive many complaints about the imports you make using the prefix '@'.
Luckily, there is a library that lets you tell eslint that everything is okay.
Add:
babylu@Project: ~$ yarn add eslint-import-resolver-babel-plugin-root-import -D
ou
babylu@Project: ~$ npm install eslint-import-resolver-babel-plugin-root-import -D
In the eslint configuration file include the following properties.
"settings": {
"import/resolver": {
"babel-plugin-root-import": {}
}
}
Questions that look stupid but are not π€
Can I use this for applications going to production?
Answer: Yes, if you have followed the steps correctly you will see that we configured for production in babel.config.js
Can I use React for web?
Answer: To use the babel plugin root import for Web, you need to perform some other settings
But not everything in life is flowers π΄
You may encounter bugs in the library. If you find it please report it in the official babel plugin root import repository and help the community create a better library.
https://github.com/entwicklerstube/babel-plugin-root-import/issues
Follow me on twitter @heybrunoandrade
Help me translate this article into other languages.
If you have received an error in the translation please make the repository to make a correction. I'll be very grateful.
Access Repository
Top comments (2)
Nice! Only one thing: in "target": "es6", I need "es5" for intellisense can recognize the node modules.
Everything was done according the guide, but have an error
React Native
"import TextComponent from '@/Atoms/TextComponent/TextComponent.js';"