Using Abolute Paths to import Components

1. Install babel plugin module resolver using the below code

   • npm install --save-dev babel-plugin-module-resolver

2. Install customize cra and react wired using

   • npm install customize-cra react-app-rewired --dev

3. create the .babelrc in the src folder or in project directory and create the alias using the below sample code

      {
           "plugins": [
             ["module-resolver", {
               "root": ["./"],
               "alias": {
                 "components": "./src/components",
                 "Containers": "./src/containers",
                 "Views": "./src/views",
                 "Routes": "./src/routes"
               }
             }]
           ]
         }
   
   

4. In the package.json file change the following code to

   Before Change

   "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   }
   

   After Change

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

5. Create the new file naming config.overrides.js and paste the below code

   const { useBabelRc, override } = require("customize-cra");
   module.exports = override(useBabelRc());
   

   -- This will actually say to Webpack to use this custom .babelrc file.