How to fix Component should be a function, class or ForwardRef, not a string in React

What this error means

This error occurs when React's component validation detects that you're trying to render something that looks like a component but is actually a string value. React expects components to be one of three things: a function component, a class component, or a ForwardRef component. When you accidentally pass a string instead of the actual component reference, React cannot render it and throws this error. This usually happens during the JSX transformation process. When you write JSX like <MyComponent />, React internally calls React.createElement(MyComponent). If MyComponent is a string rather than an actual component, React's validation fails immediately. The error is React's way of protecting you from runtime issues. If React tried to render a string as if it were a component, it would cause unpredictable behavior or crashes. Instead, it fails fast with a clear error message indicating exactly what type was expected versus what was received.

Typical symptoms

• Application crashes immediately when trying to render a specific component
• Error appears in console: "Component should be a function, class or ForwardRef, not a string"
• Component renders as blank or missing in the UI
• Error occurs after refactoring imports or component structure
• Dynamic component rendering fails with type validation error
• Tests fail with component type validation errors

Common causes

1. Passing a component name as a string literal instead of the component reference
2. Incorrect import statement (mixing up default and named exports)
3. Component variable is undefined due to circular dependency or missing export
4. Dynamic component resolution returns a string instead of the component
5. Storing component names as strings in state or configuration without proper mapping
6. Incorrect destructuring of component imports
7. Using string values in component mapping objects instead of actual component references
8. Accidentally wrapping component reference in quotes

How to fix "Component should be a function, class or ForwardRef, not a string"

// Component file
export const MyComponent = () => <div>Hello</div>;

// Usage file
import { MyComponent } from './MyComponent';
<MyComponent />

// Component file
const MyComponent = () => <div>Hello</div>;
export default MyComponent;

// Usage file
import MyComponent from './MyComponent';
<MyComponent />

// Component file uses named export
export const MyComponent = () => <div>Hello</div>;

// Usage file tries default import
import MyComponent from './MyComponent'; // Returns undefined!
<MyComponent /> // Error: undefined is not a valid component

// MyComponent.tsx
const MyComponent = () => {
  return <div>Content</div>;
};

// Missing export! This will cause import to fail
// export default MyComponent; // Add this line

import MyComponent from './MyComponent';

// Log to check what was imported
console.log('MyComponent:', MyComponent);
// Should show: function or class, not undefined or string

<MyComponent />

const componentMap = {
  header: 'Header',  // String, not component!
  footer: 'Footer'
};

const ComponentToRender = componentMap[type];
<ComponentToRender /> // Error!

import Header from './Header';
import Footer from './Footer';

const componentMap = {
  header: Header,  // Actual component reference
  footer: Footer
};

const ComponentToRender = componentMap[type];
<ComponentToRender /> // Works!

# Use a tool like madge to detect cycles
npx madge --circular src/

// ComponentA.tsx
import ComponentB from './ComponentB';
export const ComponentA = () => <ComponentB />;

// ComponentB.tsx
import ComponentA from './ComponentA'; // Circular!
export const ComponentB = () => <ComponentA />;

// SharedTypes.ts (new file)
export interface SharedProps { /* ... */ }

// ComponentA.tsx
import { SharedProps } from './SharedTypes';
import ComponentB from './ComponentB';

// ComponentB.tsx
import { SharedProps } from './SharedTypes';
// Don't import ComponentA

const MyComponent = React.forwardRef((props, ref) => {
  return 'div'; // String instead of JSX!
});

const MyComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

export default MyComponent;

const LazyComponent = React.lazy(() =>
  import('./MyComponent').then(module => module.componentName) // Returns string!
);

// Default export
const LazyComponent = React.lazy(() => import('./MyComponent'));

// Or named export
const LazyComponent = React.lazy(() =>
  import('./MyComponent').then(module => ({ default: module.MyComponent }))
);

// Usage with Suspense
<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

Advanced notes

import { ComponentType } from 'react';

// Type-safe component mapping
const componentMap: Record<string, ComponentType<any>> = {
  header: Header,
  footer: Footer
};

// TypeScript will error if you try to add a string
// componentMap.invalid = 'NotAComponent'; // Type error!

Frequently asked questions

What does "Component should be a function, class or ForwardRef, not a string" mean?

This error occurs when React's component validation detects that you're trying to render something that looks like a component but is actually a string value. React expects components to be one of three things: a function component, a class component, or a ForwardRef component. When you accidentally pass a string instead of the actual component reference, React cannot render it and throws this error.

How do I fix "Component should be a function, class or ForwardRef, not a string"?

React throws this error when you pass a string value where a component is expected. This commonly occurs when importing components incorrectly, passing component names as strings, or when dynamic component resolution fails.

What causes "Component should be a function, class or ForwardRef, not a string"?

Passing a component name as a string literal instead of the component reference Incorrect import statement (mixing up default and named exports) Component variable is undefined due to circular dependency or missing export

Is the "Component should be a function, class or ForwardRef, not a string" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Component renders too many elements, consider splitting into smaller components

  Component renders too many elements

  MEDIUM

• Warning: Expected the listening component to be mounted but it was not

  How to fix "Expected the listening component to be mounted but it was not" in React

  MEDIUM

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

  Component type mismatch warning in React

  MEDIUM

• Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

  Component did not return a value from render

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation