Element type is invalid
React expected a component type but received undefined or an object.
Usually happens because:
- ☑ Named import on default export
- ☑ Default import on named export
- ☑ Casing typo in file paths
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is Element type is invalid?
This error occurs when React attempts to render an element, but the tag resolves to undefined, null, or a plain object instead of a valid component function, class, or HTML tag. It is usually caused by import/export mismatching.
Common Causes
- Mismatched exports (mixing up default and named exports).
- Typo in file paths inside import paths resolving to empty modules.
Common Mistakes
- Importing components with casing typos (e.g. `./button` instead of `./Button`), leading to undefined resolve values on case-sensitive filesystems.
How to Fix
Framework-Specific Examples
No framework examples required for this informational status.
Wrong: Named import of Default export
// Button.js: export default function Button() {}
import { Button } from "./Button";
return <Button />;Correct: Default import syntax
import Button from "./Button";
return <Button />;Best Practices
- Leverage auto-imports inside your IDE configurations.
Frequently Asked Questions (FAQ)
Q: What does 'Element type is invalid' mean?
It means the variable name you passed to JSX (like `<MyComponent />`) resolves to `undefined` or a plain object instead of a valid function or class.
Q: Why does this happen when importing default exports?
If you write `import { MyComponent } from './MyComponent'` instead of `import MyComponent from './MyComponent'`, the imported object is undefined, triggering the error.
Q: What is the equivalent production error ID?
In production builds, this resolves to 'Minified React error #130'.
Q: Can cyclic dependencies cause this?
Yes. If component A imports B, and B imports A, it can lead to undefined imports during initialization, throwing this error.