Lazy loading ReactJS component

Question

I'm building SPA (single page app) using React and React-Router. "Employees" is one of the navigation menu items in the header. According to the docs - Route-based code splitting, I'm trying to make components lazy loading like this:

import React, { Component, lazy, Suspense } from 'react';
import './App.css';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
...
// import { Employees } from './components/Employees/Employees';
const Employees = lazy(() => import('./components/Employees/Employees'));

export default class App extends Component {
  state = {
    ...
    employeesData: [
        ...objects with data...
    ]
  }

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          ...
          <Suspense fallback={<div>Loading...</div>}>
          <Switch>
        
            {/* other routes here */}
           
            <Route path="/employees/" component={
              () =>
                <Employees
                  data={this.state.employeesData}
                />
            } />

          </Switch>
          </Suspense>
          ...
        </div>
      </BrowserRouter>
    );
  }
}

Employees component looks like:

import React from 'react';
import './css/Employees.css';

export const Employees = (props) => {

    const { data } = { ...props };

    // sort elements by name value
    data.sort(
        (a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)
    );

    let items = [];    
    
    for (let i = 0; i < data.length; i++) { 
        items.push(
            <div className="container">
                <div className="imgbox">
                    <img className="image"
                        src={ data[i].image }
                        alt={ data[i].name }                        
                    />                    
                </div>
                <div className="textbox">
                    <h4 className="name">
                        { data[i].name }
                    </h4>
                    <p className="text">
                        { data[i].title }
                        <br/>
                        { data[i].text }
                        <br/>
                        { data[i].workplace }                            
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="Employees">
            ...

            <div className="wrapper">
                ...

                { items }

            </div>
        </div>
    )
};

The thing is - when clicking on the "Employees" nav item, web-page becomes blank. What am I doing wrong?

Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Module] Your code should look like: const MyComponent = lazy(() => import('./MyComponent'))

Answer 1

It's saying it expects the Employees component to be the default export of the file. You'll have to change it to be the default export: https://reactjs.org/docs/code-splitting.html#named-exports