Question

我正在尝试使用React.lazy来延迟加载React组件。该组件如下所示：

function App() {
const HubScreen = React.lazy(() => import("./screens/hub").then((mod) => {
    console.log(mod.default)
    return mod.default;
}));

return (
    <BrowserRouter>
        <MuiThemeProvider theme={theme}>
            <MainContaier>
                <div id="screen">
                    <CssBaseline />
                    <Switch>
                        <React.Suspense fallback={<h1>Loading...</h1>}>
                            <Route exact path="/" component={HomeScreen} />
                            <Route path="/hub" render={() => <HubScreen />} />
                        </React.Suspense>
                    </Switch>
                </div>
            </MainContaier>
        </MuiThemeProvider>
    </BrowserRouter >
) 
}

这是我要导入的组件

import React from "react";

function HubScreen() {
  return (
      <div>Hi</div>
  );
}

export default HubScreen;

当我导航到/hub时，我看到mod.default的值是未定义的。随着我的Chrome窗口变得完全没有响应，需要强制停止。

我知道我到模块./screens/hub的路径是正确的，因为，如果我放置诸如./screens/hube这样的伪路径，则webpack会给我错误：

 Module not found: Error: Can't resolve './screens/hube' in '/home/travis/Workspace/avalon/assets/js'

我很困惑，在任何地方都没有发现类似的问题。

This answer使我了解了为什么我的浏览器挂起。但是我似乎仍然有同样的根本问题。 undefined module.default。将根组件更改为此：

const HubScreen = React.lazy(() => import("./screens/hub"));

function App() {
return (
    <BrowserRouter>
        <MuiThemeProvider theme={theme}>
            <MainContaier>
                <div id="screen">
                    <CssBaseline />
                    <Switch>
                        <React.Suspense fallback={<h1>Loading...</h1>}>
                            <Route exact path="/" component={HomeScreen} />
                            <Route path="/hub" component={HubScreen} />
                        </React.Suspense>
                    </Switch>
                </div>
            </MainContaier>
        </MuiThemeProvider>
    </BrowserRouter >
)
}

我明白了战争：

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

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

然后出现错误：

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

正如console.log似乎确认的那样，我已经理解是导入解析返回未定义。

Answer 1

首先，将const HubScreen移出组件。当App()重新渲染时，将导致无限循环不断尝试反复加载HubScreen。其次，只需使用() => import...并让React.lazy使用导出的默认组件。此外，您无需为该路线使用渲染。只需提供组件即可：

const HubScreen = React.lazy(() => import("./screens/hub"));

function App() {

return (
    <BrowserRouter>
        <MuiThemeProvider theme={theme}>
            <MainContaier>
                <div id="screen">
                    <CssBaseline />
                    <Switch>
                        <React.Suspense fallback={<h1>Loading...</h1>}>
                            <Route exact path="/" component={HomeScreen} />
                            <Route path="/hub" component={HubScreen} />
                        </React.Suspense>
                    </Switch>
                </div>
            </MainContaier>
        </MuiThemeProvider>
    </BrowserRouter >
    ) 
}

Answer 2

出现此错误的另一种可能性是丢失了组件中的默认导出，该默认导出将成为命名导出。

仅默认导出支持此语法。

const HubScreen = React.lazy(() => import("./screens/hub"));

import React, {useState} from 'react';

const ChangeName = (props) => {

    return (
    <div>

      <p>Name: {props.name}</p>
      <p>Email: {props.email}</p>

      <div>
        <button onClick={()=>props.changeStatus()}>Change Details</button>
      </div>
    </div>
    )
  }


  export default ChangeName; ====> By missing the default Export

module.default是未定义的动态导入

2 个答案: