React Error: Element Type Is Invalid — What It Means & How to Fix It

What Does This Error Mean?

This error means React received something unexpected where it needed a valid component or HTML element. For example, you might have imported a component incorrectly, used the wrong export (named vs default), or the component file has an error that caused it to export undefined instead of a component. This is one of the most common import/export mistakes in React.

Affected Models

React 16 and later
All React projects using modules (import/export)

Common Causes

Using a default import for a named export (or vice versa) — the most common cause
The component file has an error that causes it to not export anything, resulting in undefined being imported
Forgetting to export the component at the bottom of the file
A circular import that causes the module to load before the component is defined
Using an object property as a component (like MyComponents.Button) where the property does not exist

How to Fix It

Check the import and export syntax carefully. If the component is exported as 'export default MyComponent', import it with: import MyComponent from './MyComponent'. If exported as 'export { MyComponent }', use: import { MyComponent } from './MyComponent'.

Mixing up default and named imports is the single most common cause of this error.
Add a console.log right above the JSX that uses the component: console.log(MyComponent). If it logs 'undefined', the import is failing.

A successful import logs a function (the component). An undefined means the import found nothing.
Make sure the component file actually exports the component. Open the file and check for an export statement. It is easy to write a component but forget to export it.

Add 'export default MyComponent;' at the bottom, or add 'export' before the function declaration: 'export function MyComponent() {...}'
Check the file path in the import statement. If the file is at 'components/Button.jsx', the import should be './components/Button' (no extension needed in most setups). A wrong path imports undefined.

Paths are case-sensitive on macOS and Linux — 'button.jsx' and 'Button.jsx' are different files.
If using a third-party component library, check the documentation for the correct import syntax. Libraries often change their export structure between major versions.

Example: some libraries changed from default exports to named exports in newer versions. Check the library's migration guide if you recently updated.

When to Call a Professional

Element type is invalid errors are always fixable yourself. The most common fix is checking your import/export syntax. A quick check: console.log your imported component right before using it — if it logs undefined, the import is wrong.

Frequently Asked Questions

What is the difference between a default export and a named export?

A default export is imported without curly braces and can be given any name: import MyName from './file'. A named export uses the exact name and curly braces: import { ExactName } from './file'. A file can have one default export and multiple named exports. Mixing these up is one of the most common React mistakes.

Why does this error say 'got undefined' vs 'got null'?

Undefined means the import did not find anything — often a wrong import syntax or a missing export. Null means something explicitly returned null — less common for component imports. Both cause the same error but have slightly different root causes. Undefined almost always means an import/export mismatch.

Can this error be caused by a lazy-loaded component?

Yes — if you use React.lazy() to load a component, it must use a default export. Nameed exports are not supported with React.lazy(). If your lazily-loaded component uses a named export, either change it to a default export or create a wrapper file that re-exports it as the default.