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?

Konrad · Accepted Answer · 2022-04-19 12:53:54Z

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.

answered Apr 19, 2022 at 12:53

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related