getLazyComponent.jsx

import React from 'react'

export const getLazyComponent = (componentImport) => {
  const LazyComponent = React.lazy(componentImport)

  return () => (
    <LazyComponentErrorBoundary>
      <React.Suspense fallback={'Loading...'}>
        <LazyComponent />
      </React.Suspense>
    </LazyComponentErrorBoundary>
  )
}

class LazyComponentErrorBoundary extends React.Component {
  state = {
    error: false,
  }

  static getDerivedStateFromError() {
    return { error: true }
  }

  render() {
    return this.state.error
      ? 'Failed to load component, please refresh the page to try again'
      : this.props.children
  }
}

// Usage with default export
const LazyDefaultComponent = getLazyComponent(() => import('./MyComponent'))

// Usage with named export
// See https://github.com/reactjs/rfcs/blob/gaearon-patch-2/text/0000-lazy.md#why-the-default-field
const LazyNamedComponent = getLazyComponent(() =>
  import('./MyComponent').then((res) => ({ default: res.MyComponent }))
)