React Route-based code splitting import Unexpected token error

Question

import React, {Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const HomePage = lazy(() => import('../../layouts/Home/Home'));
const Routes = () => (
            <Router>
              <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                  <Route exact path="/" component={HomePage}/>
                </Switch>
              </Suspense>
            </Router>
        );
export default Routes;

enter image description here

i have create react project and import class component using react lazy import not working.

Please help me.

Answer 1

Checkout this post It explains how to use lazy loading with react-router

The error looks like something is wrong with the import token, due to bable issue

Try using require instead of import

Example

import React, { Suspense, lazy } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const HomePage = lazy(() => Promise.resolve(require("../../layouts/Home/Home")));
const Routes = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={HomePage} />
      </Switch>
    </Suspense>
  </Router>
);
export default Routes;

render(<Routes />, document.getElementById("root"));

Answer 2

I think you need to add plugin to use dynamic import

You can use npm to install it

npm install -D babel-plugin-syntax-dynamic-import

and then add it to your.babelrc as

{
"presets": ["env", "react"],
"plugins": ["syntax-dynamic-import"]
}

Hope it helps