绝对路径在 create-react-app 中不起作用
Absolute path not working in create-react-app
根据本文档,我在我的根目录中创建了一个 jsconfig.json 文件,以便能够在我的 React 应用程序(使用 create-react-app 设置)中使用绝对路径导入组件。不幸的是,这没有用。我尝试安装 react-app-rewired 和 react-app-rewire-alias 来尝试相同的操作,但无济于事。任何帮助将不胜感激。
以下是我的jsconfig.json文件:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
以及引发错误的文件 (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
以下行尝试从 src/Configs/firebase.js
导入几个方法
import {auth, provider} from 'Configs/firebase'
但是,以下错误仍然存在:
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
奇怪的是,在 src/index.js 的 'Components' 目录中导入 'App' 组件时,规则似乎有效,即使通过 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')
);
请在 root 上创建一个 jsconfig.json
并在其中添加以下代码
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": [
"src/*"
]
}
}
}
不要犯和我一样的错误,用 .jsconfig.json 来反对没有“.”的 jsconfig.json。
根据本文档,我在我的根目录中创建了一个 jsconfig.json 文件,以便能够在我的 React 应用程序(使用 create-react-app 设置)中使用绝对路径导入组件。不幸的是,这没有用。我尝试安装 react-app-rewired 和 react-app-rewire-alias 来尝试相同的操作,但无济于事。任何帮助将不胜感激。
以下是我的jsconfig.json文件:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
以及引发错误的文件 (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
以下行尝试从 src/Configs/firebase.js
导入几个方法import {auth, provider} from 'Configs/firebase'
但是,以下错误仍然存在:
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
奇怪的是,在 src/index.js 的 'Components' 目录中导入 'App' 组件时,规则似乎有效,即使通过 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')
);
请在 root 上创建一个 jsconfig.json
并在其中添加以下代码
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": [
"src/*"
]
}
}
}
不要犯和我一样的错误,用 .jsconfig.json 来反对没有“.”的 jsconfig.json。