🤝 Как подружить 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