React: Named imports in lazy feature

[barth12]

Hi guys,

How could I import named imports using lazy syntax?

Before we could use

import { MainComponent, Component1, Component2 } from './components';

How to achieve something like this (although this does not work)?:

const { MainComponent, Component1, Component2 } = React.lazy(() => import('./components'));

Thank you and have a good day :-)

[brookslybrand]

Looks like it's not yet available

If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default.

I think that's the only solution for now

[TrySound]

This is how I do it.

const Contacts = React.lazy(() =>
  import('./Contacts.js').then(module => ({ default: module.Contacts }))
);

[barth12]

@TrySound Thank you for that. Still we need to import every component separately though.

[aweary]

@barth12 yeah, that's the one big caveat with how React.lazy works with named exports right now. It expects that you're importing exactly one component. You won't currently be able to use destructuring like you want, they'll have to be separate React.lazy calls as @TrySound illustrated.

Closing since this is a documented shortcoming and expected behavior for now.

[amitesh786]

I try with this ->

const myComponent = React.lazy(() => import('../MyComponent'), 'default');

It works fine!