How to handle lazy loading error in react

Question

I'm trying to handle errors in React.lazy, for that I made the following component to which I pass the load function as parameters:

import React, { useState, useEffect, ReactElement, ComponentType } from 'react';
import { useErrorBoundary } from 'react-error-boundary';

interface DynamicImportWrapperProps {
  importComponent: () => Promise<{ default: ComponentType<any> }>;
}

const DynamicImportWrapper = ({
  importComponent,
}: DynamicImportWrapperProps): ReactElement | null => {
  const [Component, setComponent] = useState<ComponentType<any> | null>(null);
  const { showBoundary } = useErrorBoundary();

  useEffect(() => {
    importComponent()
      .then((module) => setComponent(module.default))
      .catch((error) => {
        error.status = 'IMPORT_FAIL';
        showBoundary(error);
      });
  }, [importComponent]);

  if (Component) {
    return <Component />;
  }

  return null;
};

export default DynamicImportWrapper;

When the import fails the ErrorBoundary is displayed correctly but when the import is successful it gives me an error: Cannot read property of undefined(reading: 'length')

Seen as there is no property `length` in any of your code posted, the error is not here. — Keith, May 17 '23 at 15:36
But the rest of the code works perfectly with the normal import and when I apply this form of import, the error appears — jesusrlm, May 19 '23 at 14:59
Like this: `const Component = React.lazy(() => import('path/to/component'))` — jesusrlm, May 19 '23 at 17:16

How to handle lazy loading error in react

0 Answers0