Element type is invalid ⚛️ React

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

JSX referenced a component that is undefined — almost always a default/named import mismatch.

Seen on: React

Meaning

React renders <Foo /> by calling Foo. If the import resolved to undefined (wrong export style, wrong path, circular import), React throws this error and names the parent component.

Common causes

  • import Foo from vs import { Foo } from mismatch
  • Component not exported
  • Circular import returning undefined
  • Importing from the wrong path/index file

⚡ Quick fix

  1. Check how the component is exported and match the import
  2. console.log the imported value
  3. Break circular imports

Detailed fix by platform

React

  1. jsx
    // Button.jsx: export function Button() {}
import { Button } from './Button';

How to diagnose

  1. Component — Which render method is named?
  2. Import — Default or named export?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.