React Uncaught错误：元素类型无效

我在React应用程序中遇到了一个问题，我收到了以下错误消息：
未捕获错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：undefined。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
此错误发生在Login组件中。
下面是我的应用程序结构：

• App.jsx是设置路由的主要组件。
• Login.jsx是路由中使用的组件之一。

下面是Login.jsx的简化代码：

import React, { useEffect, useState } from "react";
import { useLocation } from 'react-router-dom';
import { auth } from '../../firebase';
import { signInWithEmailAndPassword, createUserWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { firestore } from '../../firebase'; // If using Firestore;
import Swal from 'sweetalert2';
import { collection, addDoc } from 'firebase/firestore'
import { useNavigate } from "react-router-dom";
import { Hourglass } from 'react-loader-spinner';



const Login = () => {
    
    return (
        <>
            {isLoading ? (
                <Hourglass
                    visible={true}
                    height="100"
                    width="100"
                    ariaLabel="hourglass-loading"
                    wrapperStyle={{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        transform: 'translate(-50%, -50%)'
                    }}
                    wrapperClass=""
                    colors={['#306cce', '#72a1ed']}
                />
            ) : (
                <div className="container" id="container">
                    <div className="form-container sign-up">
                        <form onSubmit={handleSignup}>
                            <h1 className="title-black">Create Account</h1>
                            <div className="social-icons">
                                <a href="#" className="icon"><i className="fa-brands fa-google-plus-g"></i></a>
                                <a href="#" className="icon"><i className="fa-brands fa-facebook-f"></i></a>
                            </div>
                            <span>or use your email for registeration</span>
                            <input type="text" placeholder="Full Name" value={namesignup} onChange={(e) => setNameSignup(e.target.value)} />
                            <input type="email" placeholder="Email" value={emailsignup} onChange={(e) => setEmailSignup(e.target.value)} />
                            <input type="password" placeholder="Password" value={passwordsignup} onChange={(e) => setPasswordSignup(e.target.value)} />
                            <label className="custom-file-upload">
                                <input type="file" accept="image/*" onChange={handleImageChange} />
                                <span className="placeholder">Choose a profile image...</span>
                            </label>
                            <button type="submit">Sign Up</button>
                        </form>
                    </div>
                    <div className="form-container sign-in">
                        <form onSubmit={signIn}>
                            <h1 className="title-black">Sign In</h1>
                            <div className="social-icons">
                                <a href="#" className="icon"><i className="fa-brands fa-google-plus-g"></i></a>
                                <a href="#" className="icon"><i className="fa-brands fa-facebook-f"></i></a>
                            </div>
                            <span>or use your email password</span>
                            <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
                            <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
                            <a href="#">Forget Your Password?</a>
                            <button type="submit">Sign In</button>
                        </form>
                    </div>
                    <div className="toggle-container">
                        <div className="toggle">
                            <div className="toggle-panel toggle-left">
                                <h1>Welcome Back!</h1>
                                <p>Enter your personal details to use all of site features</p>
                                <button className="hidden" id="login" onClick={toggleClasse}>Sign In</button>
                            </div>
                            <div className="toggle-panel toggle-right">
                                <h1>Hello, Friend!</h1>
                                <p>Register with your personal details to use all of site features</p>
                                <button className="hidden" id="register" onClick={toggleClasse}>Sign Up</button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>

    );
};

export default Login;

字符串
在我的App.jsx中，我定义了一个使用Login组件的路由：

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MainContent from './components/mainContent/MainContent';
import Login from './components/login/Login';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainContent />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

型
问题
我之前能够运行我的应用程序而没有任何错误。但是，在执行npm run build之后，我开始遇到这个错误。我尝试了以下步骤来解决它：
检查语法错误。检查导入。验证Login组件的正确导出。在App. jsx中检查React Router配置。清除构建缓存。确保依赖项是最新的。
《神秘》The Mystery
最令人困惑的是，我以前运行应用程序时没有遇到这个错误，并且它在构建后开始发生。我还注意到从Login.jsx中删除特定的代码段，例如<Hourglass.../>，解决了错误，但我无法确定为什么这个组件会导致问题。
有没有人能提供一些见解，看看是什么原因导致了这个错误，以及如何解决它？
任何帮助或指导将不胜感激。谢谢！
尝试了各种修复，仍然错误。