lazy load in React

Question

I know about lazy loading a component like:

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

I was wondering how to handle imports like this with lazy?

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

user_3731501 · Answer

lazy expects a promise of { default: ... } object to be returned.

In case a module doesn't follow this convention, a component should be re-exported as default in intermediate module:

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

Or handled in lazy function:

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