javascript - React.lazy error Object(...) is not a function - Stack Overflow

admin管理员组

文章数量:1356874

I'm trying to Lazy Load the App ponent. I've read the React doc samples and have e up with the solution below. However, I get a TypeError: Object(...) is not a function and I'm not sure why. I've also tried doing import('').default.

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

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

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

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

export default DragDropContext(HTML5Backend)(Main);

For some reason React.lazy is undefined if I console.log it... I've tried removing node_modules and doing npm install again with no success

I'm trying to Lazy Load the App ponent. I've read the React doc samples and have e up with the solution below. However, I get a TypeError: Object(...) is not a function and I'm not sure why. I've also tried doing import('').default.

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

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

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

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

export default DragDropContext(HTML5Backend)(Main);

For some reason React.lazy is undefined if I console.log it... I've tried removing node_modules and doing npm install again with no success

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Nov 4, 2018 at 19:17 asked Nov 4, 2018 at 18:56 user7307981user7307981 4

• console.log(lazy); is that working? – Blue Commented Nov 4, 2018 at 18:58
• Oh Interesting... lazy is undefined? – user7307981 Commented Nov 4, 2018 at 19:00
• 1 React version used? – keul Commented Nov 4, 2018 at 19:01
• React 16.6 - just upgraded. Im going to try to delete node_modules and do npm install again EDIT: It still console.log as undefined – user7307981 Commented Nov 4, 2018 at 19:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

In a development server, using for example webpack-dev-server, you have to use:

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

and it will works also in a production environment.

Check you React Version, lazy was introduced in 16.6

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

Ok so I managed to get it fixed by turning off my development server and restarting using npm start.

本文标签： javascriptReactlazy error Object() is not a functionStack Overflow