Undefined Promise Error Lazy Loading Routes in React Application-CodePudding

I am trying to split my React code using lazy loading. First I receive the warning regarding the result of dynamic imports, suggesting how my code should look. Then I receive the Uncaught Error regarding element type being invalid. The result in the browser is a blank screen.

what gives? Ironman

App.js

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import * as React from 'react';

const HomePage = React.lazy(() => import('./pages/HomePage'));
const AboutPage = React.lazy(() => import('./pages/AboutPage'));
const PortfolioPage = React.lazy(() => import('./pages/PortfolioPage'));
const ContactPage = React.lazy(() => import('./pages/ContactPage'));
const LogInPage = React.lazy(() => import('./pages/LogInPage'));

export const App = () => {
    return (
        <div className="App">
        <div className="page-container bg-gradient-to-t from-gray-400 to-blue-400">
            
            {/* <Routes /> */}

            <Router>
                <Switch>
                    <React.Suspense fallback='Loading...'>
                            <Route exact path="/">
                                <HomePage />
                            </Route>
                    
                            <Route path="/login">
                                <LogInPage />
                            </Route>

                            <Route path="/about">
                                <AboutPage />
                            </Route>

                            <Route path="/portfolio">
                                <PortfolioPage />
                            </Route>

                            <Route path="/contact">
                                <ContactPage />
                            </Route>
                    </React.Suspense>
                </Switch>
            </Router>

            
        </div>
        </div>
    
    );
}

Console Warnings/Errors

Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Module]

Your code should look like: 
  const MyComponent = lazy(() => import('./MyComponent'))


Uncaught Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

HomePage.js

import logo from '../logo.svg';
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Navigation } from '../components/Navigation';
import '../critical.css';


export const HomePage = () => {
    
    const history = useHistory();

    useEffect(() => {
        
            history.push('/');
    });

    return(
       
        <div >
            <img src={logo} className="App-logo" alt="logo" />
            <Navigation/>
            <h1 className="heading my-5 font-le-havre text-4xl">Chris Mazzochi, King React Developer</h1>
            <div >
                <p >
                This web application demonstrates a full stack React login authentication flow, using Google OAuth, SendGrid, and JSON Web tokens.   

                </p>
            </div>
        
            {/* <div  id="loginLink" onClick={() => window.location.href = "/login"}>Login</div> */}
        </div>
    )  
}

CodePudding user response：

I think the possibility of getting this error is by missing the default export in your Component which becomes a named export. Please check your exports