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')
);
Please create a jsconfig.json
on root and add the below code there
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": [
"src/*"
]
}
}
}