Using React.lazy, cause an error

1

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";

to

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

errorm

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?

2

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} />
3

@joops75

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.

4

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 = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

Code source: https://reactjs.org/docs/code-splitting.html

If this fails, you could try using the React Loadable library at https://github.com/jamiebuilds/react-loadable. I’ve used this before myself with success.

5

@joops75
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?

import('./pages/Curricula')

Or I have to use routes?

6

No you don’t have to use ‘routes’ in the path name. The code I provided is just an example from https://reactjs.org/docs/code-splitting.html. 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
7

@joops75
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
8

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
9

@joops75

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