Using React.lazy, cause an error

Hello all,

I’ve been building a React app using create-react-app. I wanted to use React.lazy() to split my code.
So I changed my import statement from

import Curricula from "./pages/Curricula";


const Curricula =  React.lazy(() =>  import('./pages/Curricula'));

I’m using this component through Route in the App.js file

<Route  path="/curricula" component={Curricula} />

this caused two errors


so I changed the last statement to this

<Route  path="/curricula" component={props => <Curricula{...props} />} />

the first Error disappeared but the second error still appears to me.

How can I solve this?

You are using a dynamic import statement, which create-react-app might not be set up to compile. Try using require instead of import:

const Curricula =  React.lazy(() =>  require('./pages/Curricula'));

<Route  path="/curricula" component={Curricula} />


I’ve tried to use require() in stead of import() but still gives me the same errors.
Btw, I already use dynamic import for conditional importing in the same project but without React.lazy() and it works well not giving any error.

You could try using the Suspense module from React:

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
    <Suspense fallback={<div>Loading...</div>}>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>

Code source:

If this fails, you could try using the React Loadable library at I’ve used this before myself with success.

in this line

const Home = lazy(() => import('./routes/Home'));

from where routes in the import('./routes/Home')); came??

can I use this path to reach the component?


Or I have to use routes?

No you don’t have to use ‘routes’ in the path name. The code I provided is just an example from You should use whatever path name is correct for your component (you used './pages/Curricula').

Also, make sure you are using an up-to-date version of create-react-app to generate your projects. This could solve your problem.

1 Like

I solved it by applying the React.lazy() to all the components will be used in <route />
I don’t know why it was causing this error when I was just dynamically importing one component.
Anyway, it works now. without any error and I’m applying the example you’ve brought.

Thanks :smiley:

1 Like

Hmm, interesting. I haven’t personally used React.lazy before so this will be good for future reference. Nice to hear you’ve solved the problem.

1 Like


I think the problem was the order of import statements.
when defining this:

const Home = lazy(() => import('./routes/Home'));

it should be after all import statements and in my case I was having this import after it

import "../styles/App.scss";

and that is why it caused this error.

Import in body of module; reorder to top import/first

When I moved this import statement to the top of the file, it worked and the error gone :smiley:

1 Like