Javascript 为什么react js找不到我导出的模块？

当我运行react应用程序时，控制台说

Failed to compile.

./src/components/login/index.js
Attempted import error: 'Login' is not exported from './login'.

以下是文件夹结构：

├── index.js
├── login.js
└── register.js

index.js文件：

export { Login } from "./login";
export { Register } from "./register";

login.js文件：

import React from "react";
import ReactDOM from 'react-dom';
import loginImg from "../../login.svg";



class Login extends React.Component {
    constructor(props){
      super(props);
    }

    render() {
        return(
            // correct code
        )
    }
}


export default Login;

---

起初，我以为这是因为打字错误或诸如此类的原因，但我检查了拼写和语法，仍然对错误感到困惑。真的很想得到一些帮助

您使用了

导出默认值

，但是您的

index.js

没有导入默认导出。改为：

export { default as Login } from "./login";
export { default as Register } from "./register"

---

问题是您的登录组件具有默认导出。您将其作为命名导出导入

您的进口声明必须是

从导入登录名“./Login”

从“/Login”导入{default as Login}

或者，您应该将登录组件导出为

export{Login}

当您将任何内容作为默认值导出时，您必须将其作为默认值导入

从“/Login”导入登录名

不是

从“/Login”导入{Login}
如果要导出多个功能或组件，可以像

import { Login } from "./login";

但在您的情况下，您是在导出单个组件本身。所以你可以像

import Login from "./login";

由于
Login
是从
Login.js
导出的唯一内容，因此我认为您应该删除组件上的{}。
替换此项：

从“/Login”导入{Login}

为此：

从“/Login”导入登录名
如果在您使用Jest运行测试时发生这种情况，可能这会帮助您：

在我的例子中，是因为我启动了命令“npm run test”，然后在一个新文件夹（data/heros.JS）中创建了一个新的JS文件，但它没有找到该新文件，显示了以下错误：

Cannot find module '../data/heroes' from 'src/base/08-imp-exp.js'

但是VsCode编辑器正确地检测到了导入和导出，所以我重新启动了运行测试的终端实例，它工作了

重新启动测试终端