module.default - неопределенный динамический импорт

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'

Я в тупике, нигде не нашел подобной проблемы.

Этот ответ дал мне некоторое представление о том, почему мой браузер зависаетвверх.Однако у меня все еще есть та же самая проблема с корнем;неопределенный 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.

К которой я отнесозначают, что undefined возвращается из разрешения импорта, как, кажется, подтверждается 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 >
    ) 
}