Root import

The root import is a tool that helps us to easily import a module from anywhere that is.

React Js

First of all, you need to install some dependencies.

yarn add customize-cra react-app-rewired prettier eslint-config-prettier eslint-plugin-prettier babel-eslint babel-plugin-root-import eslint-import-resolver-babel-plugin-root-import -D

Now we need to create a new file config-overrides.js and inside it put the following code.

const { addBabelPlugin, override } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    'babel-plugin-root-import',
    {
      rootPathSuffix: 'src',
    },
  ])
);

If you're using typescript then you should create a file named tsconfig.paths.json and put it inside it and make a change in tsconfig.json adding a extends.

{
  "extends": "./tsconfig.paths.json"
}

The package.json make a change in the scripts.

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

The react-app-rewired won't change a lot, just will rewrite the react-app to support the root import to us.

If you're using the typescript you'll need to install the following dependencies.

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript prettier -D

After the installation, we need to make some changes to the .eslintrc.json.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
      "no-use-before-define": "off",
      "import/prefer-default-export": "off",
      "@typescript-eslint/no-use-before-define": ["error"],
      "react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
      "import/extensions": ["error", "ignorePackages",{"ts": "never","tsx": "never"}],
      "react/prop-types": "off"
    },
    "settings": {
      "import/resolver": {
        "typescript": {},
         "babel-plugin-root-import": {
          "rootPathPrefix": "~",
          "rootPathSuffix": "src"
        }
      }
    }

}

React Native

In the react-native we need to install the following dependencies.

yarn add babel-eslint babel-plugin-root-import eslint-import-resolver-babel-plugin-root-import -D

we need to make a change in the babel.config.js the file should look like.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'babel-plugin-inline-import',
        {
          extensions: ['.svg'],
        },
      ],
      [
        'babel-plugin-root-import', {
          rootPathSuffix: 'src',
          rootPathPrefix: '~/',
        },
      ],
    ],
  };
};

If you're using the typescript we need just make the same change in the file tsconfig.json that we made in the React Js.

Conclusion

It is just what we need, have fun.