Ошибка React.lazy Объект (...) не является функцией

Question

Я пытаюсь Ленивый Загрузить компонент приложения. Я прочитал примеры документов React и нашел решение, приведенное ниже. Тем не менее, я получаю TypeError: Object(...) is not a function, и я не уверен, почему. Я также пытался сделать import('').default.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// import { App } from './components/navigation';
// import Login from './components/login/LoginContainer';
import PrivateRoute from './components/privateRoute/PrivateRoute';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
import { Redirect } from 'react-router';

const Login = lazy(() => import('./components/login/LoginContainer'));
const App = lazy(() => import('./components/navigation/AppContainer'));

const Main = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route name="login" exact path="/login" component={Login} />
          <Route name="loginWithTripId" exact path="/login/:tripid" component={Login} />
          <PrivateRoute path="/trips/:tripid" component={App} />
          <PrivateRoute path="/trips/dashboard" component={App} />
          <Route render={() => <Redirect to={'/login'} />} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
};

export default DragDropContext(HTML5Backend)(Main);

По какой-то причине React.lazy равен undefined, если я его укажу console.log ... Я попытался удалить node_modules и снова выполнить npm install, но безуспешно

Answer 1

На сервере разработки, используя, например, webpack-dev-server, вы должны использовать:

const Login = lazy(() => import('./components/navigation/LoginContainer')); ... <Route name="login" exact path="/login" component={props => <Login {...props} />} /> ...

и будет работать также в производственной среде.

Answer 2

Проверьте свою версию React, ленивый был введен в 16,6

https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Answer 3

Хорошо, так что мне удалось исправить это, выключив сервер разработки и перезапустив с помощью npm start.