React Lazy Loading Issue in 16.13.0

Question

import React, { Component,lazy,Suspense} from 'react';
import LayoutComponent from './components/layout/Layout'
import BurgerBuilderContainer from './Containers/BurgerBuilder/BurgerBuilder'
import CheckoutContainer from './Containers/CheckOut/Checkout'
import { Route, Switch,withRouter } from 'react-router-dom'
 const OrdersContainer = lazy(()=> {
  return import('./Containers/Orders/Orders')
 })

render(){
return (
  <div>
    <Suspense fallback={<div>Loading...</div>}>
    <LayoutComponent>
      <Switch>
      <Route path="/Logout" component={LogoutContainer}></Route>
      <Route path="/Auth" component={AuthContainer}></Route>
        <Route path="/Orders" component={OrdersContainer}></Route>
        <Route path="/checkout" component={CheckoutContainer}></Route>
        <Route path="/" component={BurgerBuilderContainer}></Route>
      </Switch>
    </LayoutComponent>
    </Suspense>
  </div>
);
}

AsPer the error lazy loading is showing error on import, before using lazy loading application was working fine.

Derviş Kayımbaşıoğlu · Accepted Answer · 2020-04-23 18:18:52Z

1

can you try with

const OrdersContainer= React.lazy(() => import('./Containers/Orders/Orders'));

if error continues try

const OrdersContainer= React.lazy(() => require('./Containers/Orders/Orders'));

if still continues

React.lazy(() => import("./Containers/Orders/Orders").then(x => x.default))

lastly

import @babel/plugin-syntax-dynamic-import

edited Apr 23, 2020 at 18:18

answered Apr 23, 2020 at 18:04

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shaurya Srivastava Over a year ago

thanks for the response. but i have tried this too but its not working same error

Derviş Kayımbaşıoğlu Over a year ago

are you using create-react-app? if it is so which version of it?

Shaurya Srivastava Over a year ago

"dependencies": { "axios": "^0.19.2", "prop-type": "0.0.1", "react": "^16.13.0", "react-dom": "^16.13.0", "react-redux": "^7.2.0", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-thunk": "^1.0.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" } Please Have a look

Derviş Kayımbaşıoğlu Over a year ago

can you please try require instead of import? also make sure that lazy loading declaration is after all module imports

Derviş Kayımbaşıoğlu Over a year ago

I believe that it is about the javascript version rather then react itself

|

Collectives™ on Stack Overflow

React Lazy Loading Issue in 16.13.0

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related