绝对路径在create-react-app中无效

Question

根据这份文档，我在根目录下创建了一个jsconfig.json文件，以便在使用create-react-app设置的React应用程序中，可以使用绝对路径导入组件。但遗憾的是，这并没有起作用。我尝试安装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')
);

- Abhishek Tirkey

Answer 1

请在根目录下创建一个 jsconfig.json，并将以下代码添加到其中。

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

- Umair Riaz

---

谢谢回复，但我仍然遇到同样的错误。 - Abhishek Tirkey

尝试重新启动该项目。 - Umair Riaz

有趣的是，它适用于除了那个特定的导入之外的所有其他导入 - 看起来即使尝试通常的相对路径方式也不起作用... - Abhishek Tirkey

Answer 2

不要犯和我一样的错误，把“.jsconfig.json”和“jsconfig.json”弄混了。

- Karl Mark B

Answer 3

我遇到了这个错误，因为git/windows没有在名称中注册大小写更改。在我的本地工作正常，但当我尝试在Linux服务器上构建时，出现了“找不到模块”的错误。

文件在我的本地和代码中是src/logo.svg，但从git克隆创建了src/Logo.svg，而Linux服务器不喜欢那样。

- sirclesam