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';

Estus Flask · Accepted Answer · 2019-01-09 08:17:32Z

4

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 };
});

answered Jan 9, 2019 at 8:17

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amir Shahbabaie Over a year ago

how to import 'toast' then? I need to import both ToastContainer and toast.I tried this: lazy(async () => { const { ToastContainer, toast } = await import('react-toastify'); return { default: ToastContainer, toast }; }); but no luck, it looks as if toast is not imported

Estus Flask Over a year ago

Where do you intend to use toast? The question doesn't contain relevant code. lazy results in lazy-loaded component.

Amir Shahbabaie Over a year ago

got it, Thanks.

Collectives™ on Stack Overflow

lazy load in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related