Lazy load React-Tabs

[ramsgei]

I am not able to consume this when trying to lazy load. My code is below. I request you to please help me in this.

const { Tab, Tabs, TabList, TabPanel } = lazy(() => import('react-tabs'));

[joepvl]

From the React docs on lazy:

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

React-tabs doesn't do that; it uses named exports and does so from one file. Even if you did manage to get each component (Tabs, TabList, Tab, and TabPanel) as a separate Promise that resolves to a component, you still wouldn't be able to nest them all within the one <Suspense> — the package just wasn't made with <Suspense> in mind. If you really want to lazy-load react-tabs, I think you'd be better off using a bare import('react-tabs') and use some other mechanism to wait for that to resolve before rendering.

[jainakshitagithub]

Hello ,
Can I work on this issue , as I have enough skillset to solve the above problem