🤝 Как подружить React.lazy с дефолтным экспортом

У нас в проекте используются только именованные экспорты. Почему — писал здесь.

Но React.lazy работает только с дефолтными экспортами, и раньше нам приходилось успокаивать eslint, приговаривая // eslint-disable-next-line import/no-default-export.

Чтобы решить проблему старая дока реакта предлагает создать промежуточный файл, который ре-экспортирует компонент с дефолтным экспортом.

 
export { MyComponent as default } from "./ManyComponents.js";

Но как по мне — совсем не красиво.

Но что такое дефолтный экспорт? Когда мы используем динамическую загрузку модулей с помощью import, в промисе получим модуль. А дефолтный экспорт будет храниться в поле default, именованные экспорты будут храниться в соответствующих полях модуля.

То есть если мы экспортируем компонент Markdown с помощью именованного экспорта, то мы сможем получить к нему доступ через одноимённое свойство Markdown на загруженном модуле.

 
import React, { lazy, Suspense } from "react";
import { MySpinner } from "@private/design-system";
 
const MarkdownPreview = lazy(async () => {
    const module = await import('./myModule');
 
    // преобразуем именованный экспорт в дефолтный
    return { default: module.Markdown };
});
 
export const LazyMarkdownPreview = () => {
    return (
        <Suspense fallback={MySpinner}>
            <MarkdownPreview />
        </Suspense>
    );
};