Code Quiz

Lazy Loading a Named Export

Spot why React.lazy fails when loading a component that uses a named export.

Codejavascript

import React, { lazy, Suspense } from 'react';

// Chart.js is heavy, so we split it into its own chunk
const Chart = lazy(() => import('./Chart'));

export default function Dashboard() {
  return (
    <Suspense fallback={<div>Loading chart…</div>}>
      <Chart data={stats} />
    </Suspense>
  );
}

// Chart.js
export const Chart = () => <canvas id="chart" />;

The chart never renders and React throws an error. What is the bug?

Next →Code Splitting & Lazy Loading