15 подписчиков
🤝 Как подружить 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>
);
};
#javascript #react
1 минута
16 февраля 2025