CodePark/ questions / Performance: code splitting
START PRACTICINGPRACTICE
Frontend question · React › Performance: code splitting

Charts.jsx only has named exports, such as export function BarChart(). What happens with this code?

const BarChart = lazy(() => import('./Charts.jsx'));

function Report() {
  return (
    <Suspense fallback={<Spinner />}>
      <BarChart />
    </Suspense>
  );
}
It fails because lazy needs a default export; use import('./Charts.jsx').then(m => ({ default: m.BarChart }))

It fails, because lazy needs a default export. lazy expects the promise to resolve to a module whose default property is a component. This file has only named exports. Fix it by mapping the one you want onto default: .then(m => ({ default: m.BarChart })).

"lazy picks the first exported component" is the tempting wrong answer. lazy never guesses. The "more than one export" option is also wrong: other exports in the file are fine.