Reload page when ChunkLoadError occurs

lazyRoute.ts

import { lazy } from 'react';

/**
 * Uses React's `lazy` utility underneath, and works the same way, but
 * `lazyRoute` will handle the "ChunkLoadError" error by reloading the page.
 * This is generally a good solution when the user runs into a "ChunkLoadError"
 * while changing routes. All other errors will be passed along as normal.
 * @param factory The function that returns the result of webpack's `import`
 * @example
 * const Page = lazyRoute(() => import('components/pages/Page'));
 *
 * <Route>
 *   <Page />
 * </Route>
 */
export function lazyRoute<TComponentType extends React.ComponentType<any>>(
  factory: () => Promise<{
    default: TComponentType;
  }>,
) {
  return lazy(
    () =>
      new Promise<{ default: TComponentType }>((resolve, reject) => {
        factory()
          .then((result) => resolve(result))
          .catch((err) => {
            if (err.name === 'ChunkLoadError') {
              // Handle ChunkLoadErrors by reloading the page. Do not reject in
              // this situation to prevent the user from seeing an error
              window.location.reload();
            } else {
              reject(err);
            }
          });
      }),
  );
}