React Component Rendering Error - Element Type Invalid

React Uncaught Error: Element type is invalid

I am facing an issue in my React application where I receive the following error message:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error is occurring in my Login component.

Here's my application structure:

• App.jsx is the main component that sets up routes.
• Login.jsx is one of the components used in a route.

Here is the simplified code for 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;

In my App.jsx, I have defined a route that uses the Login component:

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;

The Issue

I was able to run my application without any errors previously. However, after doing an npm run build, I started encountering this error. I have tried the following steps to resolve it:

Checked for syntax errors. Reviewed imports. Verified the correct export of the Login component. Checked the React Router configuration in App.jsx. Cleared the build cache. Ensured that dependencies are up to date.

The Mystery

The most puzzling aspect is that I had previously run the application without encountering this error, and it started occurring after the build. I have also noticed that removing a specific section of code from Login.jsx, such as <Hourglass ... />, resolves the error, but I am unable to determine why this component is causing the problem.

Can anyone provide insights into what might be causing this error and how to resolve it?

Any help or guidance would be greatly appreciated. Thank you!

Tried various fixes, still errors.