How to use lazy loading in data-grid material-ui

0
votes

When I import data-grid via lazy loading then the error came.

const DataGrid = lazy(async () => await import('@material-ui/data-grid'))

Please tell me whether I am importing correctly because when I import other material-ui components then that component works fine but for data-grid import it occurs an error.

2
reactjsmaterial-ui

2 Answers

0
votes

DataGrid is not a default export, so try

const DataGrid = React.lazy(
  () => import('@material-ui/data-grid').then(module => ({ default: module.DataGrid }))
);

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

0
votes

For me the below code works fine, based on answer from @Someone Special

import React, { lazy, Suspense } from 'react';

const loadable = (importFunc, { fallback = null } = { fallback: null }) => {
  const LazyComponent = lazy(importFunc);

  return props => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

export default loadable;


import React, { Suspense } from 'react';
import { Loading } from 'dan-components';
import loadable from '../../utils/loadable';
const DataGrid = loadable(() =>
  import('@material-ui/data-grid').then(module => {
    return { default: module.DataGrid };
  }),
);

const LazyDataGrid = props => {
  return (
    <Suspense fallback={<Loading />}>
      <DataGrid {...props} />
    </Suspense>
  );
};

export default LazyDataGrid;