Can you deconstruct lazily loaded React components? - reactjs

Question

Using es6 imports, you can do this:
import { MyComponent } from "../path/to/components.js";
export default function () {
return <MyComponent/>;
}
Can I do it with React.lazy too?
const { MyComponent } = lazy(() => import("../path/to/components.js"));
I get the following error, but I'm not sure if it's related to this or some other bug I have:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Answer 1

Here is how I did it when I faced this problem with FontAwesome:
const FontAwesomeIcon = React.lazy(()=> import('#fortawesome/react-fontawesome').then(module=>({default:module.FontAwesomeIcon})))

Answer 2

You can if you use react-lazily.
import { lazily } from 'react-lazily';
const { MyComponent } = lazily(() => import("../path/to/components.js"));
It also allows importing more than one component:
const { MyComponent, MyOtherComponent, SomeOtherComponent } = lazily(
() => import("../path/to/components.js")
);
See this answer for more options.

Answer 3

React.lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don’t pull in unused components.
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));
More info:
https://reactjs.org/docs/code-splitting.html#named-exports

Answer 4

Of course you can. It's an honest mistake many has made,
const sub = a
const obj = { a: 'alpha', b: 'beta' }
obj.sub // wrong (accessing a direct key)
obj[sub] // right (computed property)
the same mistake slipped through for many. This is a work in progress but worked like a charm, and thanks for all the other answers to tailor it to my need.
const ComponentFactory = ({ componentName, ...props }) => {
const Component = lazy(() => import('baseui/typography').then((module) => ({ default: module[componentName] })))
return (
<Suspense fallback={<div>Loading...</div>}>
<Component {...props} />
</Suspense>
)
}
usage:
<ComponentFactory
componentName='Paragraph1'
margin='0.1rem 0rem 0.25rem 0.3rem'
color={style[of].headingText}
>
{headingMessage}
</ComponentFactory>

Answer 5

You can't with React.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.
(cf. https://reactjs.org/docs/code-splitting.html#reactlazy)
A workaround for that exists: creating an intermediate module that imports your named export and exports it as default (cf. https://reactjs.org/docs/code-splitting.html#named-exports)

Answer 6

I'd like to another workaround. This compotent chains the promise and adds the named export to the default export. src. Although, I'm not sure if this breaks tree shaking. There's a bit of an explanation here.
import {lazy} from 'react'
export default (resolver, name = 'default') => {
return lazy(async () => {
const resolved = await resolver()
return {default: resolved[name]}
})
}

Answer 7

You can resolve a promise along with the lazy loading and this way resolve your named export.
The syntax is a bit funky, but it is working:
const MyComponent = React.lazy(
() =>
new Promise(async (resolve) => {
const module = await import('../path/to/components.js');
resolve({ ...module, default: module.default });
}),
);