No, at present the React.lazy
function supports default exports only. If you want to import modules with named exports, you can create an intermediate module that re-exports it as the default. This also guarantees that tree shaking keeps working and does not pull in unused components. Let's take a component file that exports several named components,
// MoreComponents.js
export const SomeComponent = /* ... */;
export const UnusedComponent = /* ... */;
and re-export the MoreComponents.js
components into an intermediate fileIntermediateComponent.js
// IntermediateComponent.js
export { SomeComponent as default } from "./MoreComponents.js";
Now you can import the module using the lazy function, as shown below,
import React, { lazy } from 'react';
const SomeComponent = lazy(() => import("./IntermediateComponent.js"));
Comments