[Solved]-React lazy with TypeScript and Redux-Reactjs

I don't know why you think using default exports should be avoided :) I think it's just a convention that some teams have. So adding export default LazyArea; is a valid way to deal with this. You won't have too many lazy modules anyway.

That's why the solution from React docs could also work where you just put that default export into its own file.

The other recommended approach is to change import code to convert it to default inline:

const LazyArea = React.lazy(() =>
  import("./lazy-area").then((module) => ({
    default: module.LazyArea,
  }))
);

But that's seems like too much work for me :) So I created react-lazily which does what you would expect.

Example

const { LazyArea } = lazily(() => import('./lazy-area'));

it's just a small wrapper around React.lazy, but it allows you to have a really straight forward code, like that:

import { lazily } from 'react-lazily';
const { Component1, Component2 } = lazily(() => import('./Components'))