A little glue to support named exports with React.lazy

lazy-named-export.js

// Returns all named exports as though they were dynamic default exports
// https://reactjs.org/docs/code-splitting.html#named-exports

import { lazy } from 'react';

/**
 * @function lazyNamedExport
 * @param {function} dynamicImportCallback
 * @param {string} exportKey
 * @description Returns all named exports as though they were dynamic default exports
 * @example
 * import { lazy, Suspense } from 'react';
 * const LazyComponent = lazyNamedExport(() => import('./foo'), 'foo');
 * function Component() {
 *   return (
 *     <Suspense fallback={<p>loading...</p>}>
 *       <LazyComponent />
 *     </Suspense>
 *   );
 * }
 */
const lazyNamedExport = (dynamicImportCallback, exportKey) =>
  lazy(() =>
    dynamicImportCallback().then(({ [exportKey]: lazyComponent }) => ({
      default: lazyComponent,
    }))
  );