Question

根据本文档，我在我的根目录中创建了一个 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

奇怪的是，即使在通过 react-app-rewired 使用别名时，在 src/index.js 的“Components”目录中导入“App”组件时，规则似乎也有效>

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

请在 root 上创建一个 jsconfig.json 并在那里添加以下代码

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

Answer 2

不要犯和我有 .jsconfig.json 一样的错误，因为我反对没有“.”的 jsconfig.json

绝对路径在 create-react-app 中不起作用

2 个答案: