How to fix Error: You may have accidentally passed an object where a React component was expected in React

ReactINTERMEDIATEHIGHUpdated Dec 10, 2025· 141 views

This error occurs when React receives a plain object in JSX where it expects a valid component (function or class). This typically happens due to incorrect import/export patterns or defining components as objects instead of functions.

Quick fix

Fixes Error: You may have accidentally passed an object where a React component was expected

// DON'T DO THIS
const MyComponent = {
  render: function() {
    return <div>Hello</div>;
  }
};

Verify the component is defined as a function or class
Check your import and export statements match
Inspect the imported value in the console
Check for accidentally imported module objects

react — error

$// DON'T DO THIS
const MyComponent = {
  render: function() {
    return <div>Hello</div>;
  }
};
Error: You may have accidentally passed an object where a React component was expected

What this error means

This error is React's way of telling you that you're trying to render something that isn't a valid React component. React components must be functions or classes that return JSX, but instead React received a plain JavaScript object. When you use JSX like <MyComponent />, React expects MyComponent to be either a function component, a class component, or a string (for built-in HTML elements). If MyComponent is a plain object, React can't render it and throws this error. This is a runtime error that appears in the browser console and typically causes your component tree to fail rendering at that point.

Typical symptoms

Application fails to render at the point where the invalid component is used
Browser console shows "You may have accidentally passed an object where a React component was expected"
The error may be accompanied by "Element type is invalid: expected a string... but got: object"
Component appears to be imported correctly but doesn't render
TypeScript may show no errors while the runtime error persists

Common causes

Exporting a component configuration object instead of the component itself
Mixing up default and named imports (importing {Component} when it's exported as default, or vice versa)
Defining a component as a const object instead of a function or class
Importing from a module that exports multiple things without specifying which export to use
Accidentally importing the module object itself rather than a specific export
Using a higher-order component (HOC) incorrectly without calling it
Destructuring props incorrectly in component definition

How to fix "Error: You may have accidentally passed an object where a React component was expected"

1Verify the component is defined as a function or class

Check that your component is defined as a function or class, not as a plain object:

Incorrect (plain object):

javascript

// DON'T DO THIS
const MyComponent = {
  render: function() {
    return <div>Hello</div>;
  }
};

Correct (function component):

javascript

// DO THIS
const MyComponent = () => {
  return <div>Hello</div>;
};

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

Correct (class component):

javascript

// Or this
class MyComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}

2Check your import and export statements match

Ensure your import style matches your export style.

If using default export:

javascript

// MyComponent.js
export default function MyComponent() {
  return <div>Hello</div>;
}

// App.js - correct import
import MyComponent from './MyComponent';

If using named export:

javascript

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

// App.js - correct import (note the curly braces)
import { MyComponent } from './MyComponent';

Common mistake - mismatched imports:

javascript

// MyComponent.js
export default function MyComponent() { /* ... */ }

// App.js - WRONG! This imports the module object
import { MyComponent } from './MyComponent'; // undefined!

// App.js - CORRECT
import MyComponent from './MyComponent';

3Inspect the imported value in the console

Add a console.log to see what you're actually importing:

javascript

import MyComponent from './MyComponent';

console.log('MyComponent is:', MyComponent);
console.log('Type:', typeof MyComponent);

// If it logs an object instead of a function, you have an import/export mismatch

You should see:
- Type: function for function components
- An object with a prototype showing React.Component for class components

If you see a plain object or undefined, your import statement is incorrect.

4Check for accidentally imported module objects

Make sure you're not accidentally importing the entire module:

Incorrect:

javascript

import * as MyComponent from './MyComponent'; // This imports the module object!
<MyComponent /> // Error: object is not a component

Correct:

javascript

import MyComponent from './MyComponent'; // Default import
// OR
import { MyComponent } from './MyComponent'; // Named import
<MyComponent />

If you need to use import *, access the component property:

javascript

import * as MyModule from './MyComponent';
<MyModule.default /> // If it's a default export
// OR
<MyModule.MyComponent /> // If it's a named export

5Verify HOCs are called correctly

If you're using Higher-Order Components (HOCs), ensure you're calling them:

Incorrect:

javascript

import { connect } from 'react-redux';

const MyComponent = () => <div>Hello</div>;

// WRONG - connect returns a function, not a component
export default connect;

Correct:

javascript

import { connect } from 'react-redux';

const MyComponent = () => <div>Hello</div>;

// CORRECT - call the HOC with your component
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

6Check for circular dependencies

Circular dependencies can cause imports to be undefined or partial objects:

javascript

// ComponentA.js
import ComponentB from './ComponentB';
export default function ComponentA() {
  return <ComponentB />;
}

// ComponentB.js
import ComponentA from './ComponentA'; // Circular!
export default function ComponentB() {
  return <ComponentA />;
}

Solution: Restructure your components to avoid circular imports, or use lazy loading:

javascript

import { lazy, Suspense } from 'react';

const ComponentA = lazy(() => import('./ComponentA'));

export default function ComponentB() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ComponentA />
    </Suspense>
  );
}

Advanced notes

TypeScript considerations:
In TypeScript projects, this error can occur even when TypeScript shows no type errors. This happens because TypeScript checks types at compile time but doesn't catch runtime import/export mismatches. Always verify your imports match your exports.

Next.js specific issues:
In Next.js, having { "type": "module" } in your package.json can cause module resolution issues. Next.js expects CommonJS modules for server-side rendering. Remove this setting if you encounter this error in Next.js projects.

Module bundler considerations:
Different bundlers (Webpack, Vite, Parcel) may handle imports slightly differently. If you're using barrel exports (index.js files that re-export multiple components), ensure each component is properly exported from the barrel file:

javascript

// components/index.js
export { default as Button } from './Button';
export { default as Input } from './Input';
// Not: export default { Button, Input }; // This creates an object!

React.createElement vs JSX:
This error can also occur if you're using React.createElement directly:

javascript

// Incorrect
React.createElement(myConfigObject, props);

// Correct
React.createElement(MyComponent, props);

Frequently asked questions

What does "Error: You may have accidentally passed an object where a React compon" mean?: This error is React's way of telling you that you're trying to render something that isn't a valid React component. React components must be functions or classes that return JSX, but instead React received a plain JavaScript object. When you use JSX like <MyComponent />, React expects MyComponent to be either a function component, a class component, or a string (for built-in HTML elements).
How do I fix "Error: You may have accidentally passed an object where a React compon"?: This error occurs when React receives a plain object in JSX where it expects a valid component (function or class). This typically happens due to incorrect import/export patterns or defining components as objects instead of functions.
What causes "Error: You may have accidentally passed an object where a React compon"?: Exporting a component configuration object instead of the component itself Mixing up default and named imports (importing {Component} when it's exported as default, or vice versa) Defining a component as a const object instead of a function or class
Is the "Error: You may have accidentally passed an object where a React compon" 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

How to fix Error: You may have accidentally passed an object where a React component was expected in React

Quick fix

What this error means

Typical symptoms

Common causes

How to fix "Error: You may have accidentally passed an object where a React component was expected"

Advanced notes

Frequently asked questions

Related errors

Official resources & further reading