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')
);

Hageman

Answer 1

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

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

Attwood

Thanks for the reply, but I'm still getting the same error with it. – Hageman

try to restart the project – Attwood

The funny thing is that it works for all other imports except that particular one - it seems it won't work even on trying the usual relative path way... – Hageman

Answer 2

Dont make the same mistake as me having .jsconfig.json as oppose to jsconfig.json without the "."

Beichner

Answer 3

I was hitting this error because git/windows didn't register a case change in the name. Worked fine on my local but when I tried to build on my linux server, got the 'module not found' error.

File was src/logo.svg on my local and in code, but cloning from git created src/Logo.svg and the linux server didn't like that

Moke

Answer 4

Just throwing in another possible solution that helped me:

I had this issue because I was using .jsx files and the example code for jsconfig.js did not work.

However, using the code from an example tsconfig.js file for TypeScript did work (though the file name must remain jsconfig.js):

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

Kithara