How to fix Warning: <Component /> is not a <Component /> component in React

ReactINTERMEDIATEMEDIUMUpdated Dec 9, 2025· 139 views

This warning occurs when React receives an invalid component type, such as passing an object, undefined, or incorrect value where a React component is expected. It commonly happens due to import/export mismatches or incorrect prop types.

Quick fix

Fixes Warning: <Component /> is not a <Component /> component

// ComponentA.js
export default function ComponentA() {
  return <div>A</div>;
}

// Correct import
import ComponentA from './ComponentA';

// Incorrect import (will import module object)
import { ComponentA } from './ComponentA'; // Wrong!
  1. Check import/export consistency
  2. Verify component is properly exported
  3. Fix component prop types
  4. Fix lazy-loaded component imports
react — error
// ComponentA.js
export default function ComponentA() {
  return <div>A</div>;
}
// Correct import
import ComponentA from './ComponentA';
// Incorrect import (will import module object)
import { ComponentA } from './ComponentA'; // Wrong!
Warning: <Component /> is not a <Component /> component

What this error means

This React warning indicates that the component type being rendered or passed as a prop is not what React expects. React components must be either: 1. Built-in components (represented as strings like "div", "span", "button") 2. Function components (JavaScript functions that return JSX) 3. Class components (ES6 classes extending React.Component) When React encounters something else—such as an object, undefined, null, or a module object—it throws this warning because it cannot render the invalid type. This often manifests when there's a mismatch between how a component is exported and how it's imported, or when a prop that expects a component receives the wrong type. The warning typically includes details about what type was received (object, undefined, etc.) versus what was expected, which helps identify the source of the mismatch.

Typical symptoms

  • Warning message in browser console mentioning component type mismatch
  • Component fails to render or displays blank space
  • Error mentions "expected a string (for built-in components) or a class/function"
  • Application shows "Element type is invalid" error
  • Component works in development but fails in production
  • PropTypes validation warning about component type

Common causes

  1. Mixing up default and named imports when importing components
  2. Forgetting to export a component from its file
  3. Passing a module object instead of the component itself
  4. Using incorrect destructuring when importing components
  5. Passing undefined to a prop that expects a component
  6. Circular dependencies between component files
  7. Lazy loading components incorrectly with React.lazy()
  8. PropTypes.elementType validation failing on invalid component type

How to fix "Warning: <Component /> is not a <Component /> component"

1Check import/export consistency

Verify that your imports match how the component is exported.

If the component is exported as a default export:

javascript
// ComponentA.js
export default function ComponentA() {
  return <div>A</div>;
}

// Correct import
import ComponentA from './ComponentA';

// Incorrect import (will import module object)
import { ComponentA } from './ComponentA'; // Wrong!

If the component is a named export:

javascript
// ComponentB.js
export function ComponentB() {
  return <div>B</div>;
}

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

// Incorrect import (will be undefined)
import ComponentB from './ComponentB'; // Wrong!
2Verify component is properly exported

Ensure the component file actually exports the component.

Common mistake - forgetting to export:

javascript
// MyComponent.js - WRONG
function MyComponent() {
  return <div>Hello</div>;
}
// Missing export!

Correct approach:

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

// Or as named export
export function MyComponent() {
  return <div>Hello</div>;
}
3Fix component prop types

When passing components as props, ensure you're passing the component itself, not an instance or undefined.

Incorrect - passing undefined or wrong type:

javascript
// Wrong - component might be undefined
import { NonExistentComponent } from './components';

function Wrapper() {
  return <Layout sidebar={NonExistentComponent} />; // undefined
}

Correct approach:

javascript
import { Sidebar } from './components';

function Wrapper() {
  // Pass the component reference, not an instance
  return <Layout sidebar={Sidebar} />;
}

// In Layout component
function Layout({ sidebar: SidebarComponent }) {
  return (
    <div>
      <SidebarComponent /> {/* Render as component */}
    </div>
  );
}

Add PropTypes validation:

javascript
import PropTypes from 'prop-types';

Layout.propTypes = {
  sidebar: PropTypes.elementType.isRequired,
};
4Fix lazy-loaded component imports

Ensure React.lazy() is used correctly with dynamic imports.

Incorrect lazy loading:

javascript
// Wrong - importing synchronously
const LazyComponent = React.lazy(() => import('./Component'));

Correct lazy loading with default exports:

javascript
// Component must be default export
const LazyComponent = React.lazy(() => import('./Component'));

// Usage with Suspense
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

For named exports, wrap in default export:

javascript
// If component is named export
const LazyComponent = React.lazy(() =>
  import('./Component').then(module => ({
    default: module.NamedComponent
  }))
);
5Check for circular dependencies

Circular imports can cause components to be undefined at runtime.

Identify circular dependencies:

bash
# Install madge to detect circular dependencies
npm install --save-dev madge

# Check for circular dependencies
npx madge --circular src/

Break the circular dependency:

javascript
// Before (circular):
// ComponentA.js imports ComponentB
// ComponentB.js imports ComponentA

// After (fixed):
// Extract shared logic to a new file
// SharedUtils.js - contains shared code
// ComponentA.js imports SharedUtils
// ComponentB.js imports SharedUtils

Use dependency injection or composition to avoid circular refs:

javascript
// Instead of direct import, pass as prop
function ParentComponent() {
  return (
    <ComponentA childComponent={ComponentB} />
  );
}
6Verify build and module resolution

Check that your bundler is correctly resolving modules.

For Webpack/Create React App, check your import paths:

javascript
// Use full relative paths
import Component from './Component'; // ✓
import Component from './Component.jsx'; // ✓
import Component from './components'; // Only if index.js exists

Verify your tsconfig.json or jsconfig.json:

json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

Clear build cache if issues persist:

bash
# Create React App
rm -rf node_modules/.cache

# Next.js
rm -rf .next

# Vite
rm -rf node_modules/.vite

# Rebuild
npm install
npm run build

Advanced notes

TypeScript Component Types

When using TypeScript, properly type component props:

typescript
import { ComponentType, FC } from 'react';

interface LayoutProps {
  sidebar: ComponentType; // Accepts any valid component
  header: ComponentType<{ title: string }>; // With specific props
}

const Layout: FC<LayoutProps> = ({ sidebar: Sidebar, header: Header }) => (
  <div>
    <Header title="My App" />
    <Sidebar />
  </div>
);

React.ElementType vs ComponentType

- React.ElementType: Accepts strings (HTML tags) or components
- React.ComponentType: Only accepts function/class components

typescript
type ElementType = string | ComponentType; // "div" or MyComponent
type ComponentType<P = any> = ComponentClass<P> | FunctionComponent<P>;

HOC (Higher-Order Component) Patterns

When wrapping components, preserve component type:

typescript
function withAuth<P extends object>(
  Component: ComponentType<P>
): ComponentType<P> {
  return (props: P) => {
    const isAuthenticated = useAuth();
    if (!isAuthenticated) return <LoginScreen />;
    return <Component {...props} />;
  };
}

Production vs Development Differences

Component type errors may only appear in production if:
- Tree shaking removes unused exports
- Minification changes module structure
- Dynamic imports behave differently

Always test production builds locally:

bash
npm run build
npx serve -s build # For CRA
npm run preview # For Vite

Frequently asked questions

What does "Warning: <Component /> is not a <Component /> component" mean?
This React warning indicates that the component type being rendered or passed as a prop is not what React expects. React components must be either: 1. Built-in components (represented as strings like "div", "span", "button") 2.
How do I fix "Warning: <Component /> is not a <Component /> component"?
This warning occurs when React receives an invalid component type, such as passing an object, undefined, or incorrect value where a React component is expected. It commonly happens due to import/export mismatches or incorrect prop types.
What causes "Warning: <Component /> is not a <Component /> component"?
Mixing up default and named imports when importing components Forgetting to export a component from its file Passing a module object instead of the component itself
Is the "Warning: <Component /> is not a <Component /> component" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading