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

我正在尝试使用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 >
) 
}

我被难住了，因为在任何地方都没有发现类似的问题

让我明白了为什么我的浏览器挂断了。然而，我似乎仍然有同样的根本问题；未定义的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 >
)
}

然后是错误：

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

---

我认为这意味着从导入解析返回undefined，正如console.log所确认的那样。

首先，将

常量HubScreen

移到组件之外。当

App（）

重新加载时，它将导致一个infinate循环不断尝试加载

HubScreen

。其次，只需使用

（）=>导入…

并让

做出反应。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 >
    ) 
}

consthubscreen=React.lazy（（）=>import（“./screens/hub”）；
函数App（）{
返回(
) 
}

另一种可能出现此错误的方法是组件中缺少默认导出，该导出将成为命名导出

仅默认导出支持此语法

consthubscreen=React.lazy（（）=>import（“./screens/hub”）；

import React，{useState}来自“React”；
const ChangeName=（道具）=>{
返回(
名称：{props.Name}

电子邮件：{props.Email}

props.changeStatus（）}>更改详细信息
)
}
导出默认ChangeName；==>由于缺少默认的导出

重新加载

/screens/hub

解释了我的浏览器挂起的原因。但我仍然存在默认导出未定义的问题。我添加了

，然后添加了
，这样我就可以注销导入过程。使用上面的代码，我得到一个错误，它似乎在抱怨默认导出未定义。我将把它添加到问题中。@TravisSmith
console.log（HubScreen）
就在导出之前。确保你没有输入错误，并告诉我当控制台尝试加载时你在控制台中看到了什么。它甚至根本没有击中日志。我改为
const-HubScreen=require（“./screens/hub”）
，然后我看到了日志：
HubScreen（）{return-react\uuuuu-WEBPACK\u-IMPORTED\u-MODULE\u0\uuuu-default.a.createElement（“div”，null，“Hi”）}
。但是当使用React.lazy时，根本不会调用日志。此外，这可能是相关的。使用
require
语法会产生相同的错误。但是，使用
从“/screens/hub”导入HubScreen
呈现组件。尝试：
const HubScreen=React.lazy（（）=>require（“/screens/hub”）
如果我这样做，我会看到日志，但我会得到一个错误：
uncaughtnull
和之后的
uncaughttypeerror:\u thenable.then不是一个函数
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.

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