Absolute path not working in create-react-app

Question

As per this documentation I created a jsconfig.json file in my root directory in order to be able to import components using absolute paths in my React Application (which was set up using create-react-app). Unfortunately this didn't work. I tried installing react-app-rewired along with react-app-rewire-alias to attempt the same, but to no avail. Any help would be appreciated.

The following is my jsconfig.json file:

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
}

and the file where the error is being thrown (src/Components/Pages/Login/LoginForm)

import React from 'react'
import './Login.css'

import ToggleButton from '@material-ui/lab/ToggleButton'
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'

import IconButton from '@material-ui/core/IconButton'
import Button from '@material-ui/core/Button'
import Input from '@material-ui/core/Input'
import OutlinedInput from '@material-ui/core/OutlinedInput'
import InputLabel from '@material-ui/core/InputLabel'
import InputAdornment from '@material-ui/core/InputAdornment'
import FormControl from '@material-ui/core/FormControl'
import TextField from '@material-ui/core/TextField'

import {MdVisibility, MdVisibilityOff} from 'react-icons/md'
import { FormHelperText } from '@material-ui/core'

import {useSpring, animated} from 'react-spring' // For animation of components

import {auth, provider} from 'Configs/firebase'

function LoginForm(props) {

    const signIn = () => {
        auth.signInwithPopup(provider)
        .then((result) => {
            console.log(result);
        })
        .catch((error) => alert(error.message));
    }

    const springProps = useSpring({opacity: 1, from: {opacity: 0}});

    const handleChange = prop => event => {
        props.setFields({ ...props.formFields, [prop]: event.target.value}); // This will take any field and update it
    }

    const handleRoleToggle = (event, currentRole) => {
        props.setFields({role : currentRole});
    }

    const handleClickShowPassword = () => {
        props.setFields({ ...props.formFields, showPassword: !props.formFields.showPassword});
    }

    const handleMouseDownPassword = event => {
        event.preventDefault();
    }

    return (
        <animated.form className="formFields" style={springProps}>
                    <span className="lightText margin_top_bottom">Log in as</span>
                    <ToggleButtonGroup
                        value={props.formFields.role}
                        exclusive
                        onChange={handleRoleToggle}
                        aria-label="User Role"
                    >
                        <ToggleButton value='tutee' aria-label="Tutee">
                            Tutee
                        </ToggleButton>
                        <ToggleButton value='tutor' aria-label="Tutor">
                            Tutor
                        </ToggleButton>
                        <ToggleButton value='admin' aria-label="Admin">
                            Admin
                        </ToggleButton>
                    </ToggleButtonGroup>
                    <FormControl className="flex_item">
                        <InputLabel htmlFor="username">Username</InputLabel> 
                        <Input 
                            id="username" 
                            value={props.formFields.username} 
                            onChange={handleChange('username')}
                            inputProps={{'aria-label': 'Username'}}
                        />
                    </FormControl>
                    <FormControl className="flex_item">
                        <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
                        <Input
                            id="standard-adornment-password"
                            type={props.formFields.showPassword ? 'text':'password'}
                            value={props.formFields.password}
                            onChange={handleChange('password')}
                            endAdornment={
                                <InputAdornment position="end">
                                    <IconButton 
                                        aria-label="toggle password visibility"
                                        onClick={handleClickShowPassword}
                                        onMouseDown={handleMouseDownPassword} 
                                    >
                                        {props.formFields.showPassword ? <MdVisibility/> : <MdVisibilityOff/>}
                                    </IconButton>
                                </InputAdornment>
                            }
                        />
                        <FormHelperText id="forgot_password_helper_text"><span className="pinkText clickable" onClick={() => props.setFormType('forgot_password')}>Forgot Password?</span></FormHelperText> 
                    </FormControl>
                    <Button 
                        classes={{
                                    root: 'flex_item themeButton',
                                    label: 'whiteText'
                                }}
                        // onClick={() => signIn}
                    >Login</Button>
                    {/* <button type="submit" className="themeButton fullWidth">Login</button> */}
            </animated.form>
    )
}

export default LoginForm

The following line attempts to import a couple of methods from src/Configs/firebase.js

import {auth, provider} from 'Configs/firebase'

However, the following error persists:

Failed to compile.

./src/Components/Pages/Login/LoginForm.js
Module not found: Can't resolve 'Configs/firebase' in 'C:\xampp2\htdocs\projects\node_react_mern\product\src\Components\Pages\Login

Strangely enough, the rules seemed to work while importing the 'App' component in the 'Components' directory in src/index.js, even while using aliases via react-app-rewired

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'Components/App';

// import firebase from 'firebase'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

Please create a jsconfig.json on root and add the below code there

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "*": [
                "src/*"
            ]
        }
    }
}