React errorReact: “Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined”

Why the component came in as undefined, and the fix

1. 01

   Default and named imports mixed up

   “You will get an error if you try to import a default export the same way you would a named export!” React, Importing and Exporting Components

   Curly braces import a named export; no braces import the default export. Use the form that matches how the file exports it, or change the export.

   // Button.jsx
   export default function Button() { /* ... */ }
   
   // breaks: Button is undefined
   import { Button } from './Button';
   
   // works
   import Button from './Button';

2. 02

   The component was never exported

   A component written in a file without export, or exported under a different name after a rename, imports as undefined. Open the file and check the export line matches the name you import. TypeScript and ESLint’s import/named rule flag this before it runs. Also check the letter case of the file name: import Button from './button' works on a Mac but fails on Linux build servers such as Netlify or Vercel when the file is Button.jsx.

3. 03

   A package that changed its exports

   After a major upgrade, a library may move a component or switch from a default to a named export (React Router’s Switch is one example). Check the library’s changelog for the version you installed, and import the name it now exports. If the import works but is an object with a default key, use the .default or the named export instead.

4. 04

   Next.js: a component across the server and client boundary

   In the App Router, a client-only library imported into a Server Component can arrive as undefined. Put "use client" at the top of a small wrapper file that imports the library, and render that wrapper. next/dynamic, like React.lazy, needs a module whose default export is the component.

5. 05

   React.lazy pointing at a named export

   “Using this pattern requires that the lazy component you’re importing was exported as the default export.” React, lazy

   lazy() renders the default export of the module it loads. If the component is a named export, map it to default in the import.

   // Chart.jsx exports: export function Chart() {}
   const Chart = lazy(() =>
     import('./Chart').then((m) => ({ default: m.Chart }))
   );

Checked against the vendor’s docs on November 8, 2026: React: Importing and Exporting Components (default vs named exports); React reference: lazy.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: React Router “Switch is not exported from react-router-dom” · React “Objects are not valid as a React child” · React “Invalid hook call”