Search code examples
reactjslazy-loading

Named Lazy import in React Workaround

I made a workaround for named Lazy imports in React I want someone to check if this is actually working as lazy import or not.

Toast.js

import { ToastContainer } from "react-toastify";
export default ToastContainer;

App.js

const ToastContainer = React.lazy(() => import("../main/shared/toast"));

return(
      <Suspense fallback={null}>
        <ToastContainer />
      </Suspense>
);
Solution

  • As React official documentation said "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."

    https://reactjs.org/docs/code-splitting.html

    It is working as a lazy component you export this as a default component in 2nd line