How to fix Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object in React

ReactINTERMEDIATEHIGHUpdated Dec 9, 2025· 235 views

React received an invalid component type that is neither a string (built-in HTML element) nor a function/class (custom component). This typically happens when components are incorrectly imported, not exported, or defined as invalid values.

Quick fix

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

// Correct
import MyComponent from './MyComponent';

Check your imports are using the correct syntax
Verify the component file exports correctly
Check for typos in file paths
Ensure components are defined as functions or classes

react — error

$// Correct
import MyComponent from './MyComponent';
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

What this error means

This error occurs when React's JSX transpiler tries to render something that isn't a valid React component. React components must be one of two types: 1. Built-in components represented as lowercase strings: "div", "span", "button", etc. 2. Custom components defined as functions or classes: MyComponent, MyClass, etc. When React encounters an object, undefined, null, or other invalid type in the JSX, it throws this invariant violation. This is a fundamental validation that prevents React from attempting to render invalid structures. The error message indicates React's type checking failed at the point of rendering, which means your JSX is referencing something that isn't a proper component.

Typical symptoms

Blank white screen with a console error
Application crashes immediately on render
Error appears with a specific component name in the stack trace
Works in development but fails in production builds
Error message includes 'but got: undefined' or 'but got: object'

Common causes

Mixing default and named imports when importing a component (e.g., import MyComponent instead of import { MyComponent })
Forgetting to export a component from its file or using the wrong export type
Defining a component as a variable that returns JSX instead of a function
Importing from the wrong library or file path
Typos in import paths causing the imported value to be undefined
Circular dependencies that result in undefined module imports
Re-exporting a component that was never properly exported from its source
Using a variable or value that isn't a component in JSX (e.g., <myObject /> instead of <MyObject />)

How to fix "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object"

1Check your imports are using the correct syntax

Verify that components exported as default are imported without curly braces, and named exports use curly braces.

Default export:

jsx

// Correct
import MyComponent from './MyComponent';

Named export:

jsx

// Correct
import { MyComponent } from './MyComponent';

// Wrong - will be undefined
import MyComponent from './MyComponent';

If you've mixed up the import style, the imported value will be undefined, triggering this error.

2Verify the component file exports correctly

Check that the file where the component is defined actually exports it. Common issues:

Exported as default but importing as named:

jsx

// MyComponent.jsx - exports as default
export default function MyComponent() {
  return <div>Hello</div>;
}

// App.jsx - wrong import syntax
import { MyComponent } from './MyComponent'; // ERROR

Exported as named but importing as default:

jsx

// MyComponent.jsx - exports as named
export function MyComponent() {
  return <div>Hello</div>;
}

// App.jsx - wrong import syntax
import MyComponent from './MyComponent'; // ERROR

Fix by matching the export type with the import syntax.

3Check for typos in file paths

Even a small typo in the import path will cause the component to be undefined.

jsx

// Wrong - typo in filename
import Button from './components/Botton'; // File is actually Button.jsx

// Correct
import Button from './components/Button';

Use your IDE's autocomplete or search to verify file names match exactly (case-sensitive on Linux/Mac).

4Ensure components are defined as functions or classes

Components must be functions (functional components) or classes (class components), not plain variables.

Wrong - component as variable:

jsx

const MyComponent = <div>Hello</div>; // This is JSX, not a component

function App() {
  return <MyComponent />; // ERROR - MyComponent is not a function
}

Correct - component as function:

jsx

function MyComponent() {
  return <div>Hello</div>;
}

function App() {
  return <MyComponent />;
}

Components must be callable (functions/classes) so React can invoke them during rendering.

5Debug with console.log to identify the bad value

Add logging before the problematic render to see what value React is receiving:

jsx

import MyComponent from './MyComponent';

console.log('MyComponent value:', MyComponent); // Check if undefined or an object

function App() {
  return <MyComponent />;
}

If the console shows undefined, the import failed. If it shows an object (like { default: function }), you likely have a default/named import mismatch.

6Check for circular dependencies

Circular dependencies can cause imported values to be undefined.

Example circular dependency:

jsx

// A.jsx
import B from './B';

export default function A() {
  return <B />;
}

// B.jsx
import A from './A'; // Circular!

export default function B() {
  return <A />;
}

Refactor to break the cycle by extracting shared code into a third module:

jsx

// Shared.jsx
export function sharedLogic() { }

// A.jsx
import B from './B';
import { sharedLogic } from './Shared';

// B.jsx
import { sharedLogic } from './Shared'; // No circular dependency

Advanced notes

This error can appear in production even if development works fine due to module bundling differences. Minified React messages may show this error without the full explanation.

When using third-party component libraries, ensure you're importing from the correct entry point. For example, some libraries export differently for ESM vs CommonJS. Also check that peer dependencies (like the library version of React) match your application version.

If using Redux or context providers, verify the Provider is wrapping components correctly and that selectors/hooks are returning valid components, not plain values.

For React Router, make sure to import Link from 'react-router-dom' not from 'react-router' to avoid this error.

Frequently asked questions

What does "Element type is invalid: expected a string (for built-in components) o" mean?: This error occurs when React's JSX transpiler tries to render something that isn't a valid React component. React components must be one of two types: 1. Built-in components represented as lowercase strings: "div", "span", "button", etc.
How do I fix "Element type is invalid: expected a string (for built-in components) o"?: React received an invalid component type that is neither a string (built-in HTML element) nor a function/class (custom component). This typically happens when components are incorrectly imported, not exported, or defined as invalid values.
What causes "Element type is invalid: expected a string (for built-in components) o"?: Mixing default and named imports when importing a component (e.g., import MyComponent instead of import { MyComponent }) Forgetting to export a component from its file or using the wrong export type Defining a component as a variable that returns JSX instead of a function
Is the "Element type is invalid: expected a string (for built-in components) o" error serious?: Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading

📚React Official Documentation