How can I import multiple functions or components from a package using react lazy

Question

I have to replace the usage of loadable with react.lazy

This is how it was with loadable:

const loadReactIntl = () => import('react-intl');

export const intlProvider = () => Loadable({
  loader: () => loadReactIntl(),
  render(loaded, props) {
    **const { createIntl, createIntlCache, RawIntlProvider } = loaded;** // <-- this line what I'm looking for
    ... // skip rest of the code
  },
});

I'm trying to do something similar to the highlighted line but with react.lazy instead of loadable, something like this:

const ReactIntl = lazy(() => import('react-intl');

export const getLoadableIntlProvider = (localesLoaderConfig = localeConfig) => (props) => {
  const { messages } = props;
  const { createIntl, createIntlCache, RawIntlProvider } = ReactIntl;
  ... // skip the rest of the code
};

I tried doing something like this, but that did not work either it keeps giving me e.g. createIntl undefined:

const ReactIntl = lazy(() => import('react-intl').then((module) => ({ default: module.RawIntlProvider, createIntlCache: module.createIntlCache, createIntl: module.createIntl })));;

Is there a way to get around this?

Answer 1

This is what you probably want:

const RawIntlProvider = lazy(() => import('react-intl').then((module) => ({ default: module.RawIntlProvider })));;
const createIntlCache = lazy(() => import('react-intl').then((module) => ({ default: module.createIntlCache })));;

But I don't know if this lazy is really needed as you want to load module, not component.