ленивая нагрузка в React

Question

Я знаю о ленивой загрузке компонента вроде:

import React, { lazy } from "react";
const Search = lazy(() => import('./components/search/Search'));

Мне было интересно, как обрабатывать импорт таким образом с помощью lazy?

import { ToastContainer, toast } from 'react-toastify';

Answer 1

lazy ожидает возврата объекта { default: ... }.

В случае, если модуль не следует этому соглашению, компонент должен быть реэкспортирован как default в промежуточный модуль:

export { ToastContainer as default, toast } from 'react-toastify';

или обрабатывается в lazy функции:

lazy(async () => {
  const { ToastContainer } = await import('react-toastify');
  return { default: ToastContainer };
});