React 应用程序中未定义的承诺错误延迟加载路由

Question

我正在尝试使用延迟加载拆分我的 React 代码。首先，我收到有关动态导入结果的警告，提示我的代码应该如何显示。然后我收到关于元素类型无效的未捕获错误。浏览器中的结果是一个空白屏幕。

什么给了？钢铁侠

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>
    
    );
}

控制台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 class="content-container w-screen md:w-7/12  ">
            <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 class="imageDiv flex-wrap-nowrap ">
                <p class="aboutText font-raleway">
                This web application demonstrates a full stack React login authentication flow, using Google OAuth, SendGrid, and JSON Web tokens.   

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

Answer 1

我认为出现此错误的可能性是缺少组件中成为命名导出的默认导出。请检查您的导出

React 应用程序中未定义的承诺错误延迟加载路由

Undefined Promise Error Lazy Loading Routes in React Application

lazy-loading

reactjs

code-splitting