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

Umair Riaz · Accepted Answer · 2021-02-23 05:29:06Z

10

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

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

answered Feb 23, 2021 at 5:29

Umair Riaz

4764 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Tirkey Over a year ago

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

Umair Riaz Over a year ago

try to restart the project

Abhishek Tirkey Over a year ago

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...

MeltingDog · Accepted Answer · 2024-08-07 05:54:24Z

1

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/*"]
    }
  }
}

answered Aug 7, 2024 at 5:54

MeltingDog

15.8k54 gold badges179 silver badges325 bronze badges

Comments

Karl Mark B · Accepted Answer · 2021-03-25 00:48:59Z

0

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

answered Mar 25, 2021 at 0:48

Karl Mark B

112 bronze badges

Comments

sirclesam · Accepted Answer · 2022-10-18 21:02:39Z

0

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

answered Oct 18, 2022 at 21:02

sirclesam

2,38721 silver badges14 bronze badges

Collectives™ on Stack Overflow

Absolute path not working in create-react-app

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related