[Solved] type is invalid — expected a string (for built-in components) or a class/function

Today I am trying to run my react app but am stuck with this error: type is invalid — expected a string (for built-in components) or a class/function in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How type is invalid — expected a string (for built-in components) or a class/function Error Occurs?

I am trying to run my react app but am stuck with this error.

type is invalid -- expected a string (for built-in components) or a class/function

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve type is invalid — expected a string (for built-in components) or a class/function Error?

Solution 1: Import Like this

This error Usually Occurs Because of Incorrect Imports or Incorrect Exports. For Example, I am trying to import BrowserRouter from react-router-dom but It will Also Give me the above error then? Then You have to Import Like {BrowserRouter } lIke this as Below Code.

import { BrowserRouter } from 'react-router-dom';

OR If you are Importing ReactDOM then Import Like this.

import {ReactDOM} from 'react-dom';

And, Now Your error must be solved. Thank You.

Solution 2: Export Like this

As I said this error mostly Occurs because of Incorrect Exports Or Incorrect Imports. So You need to Export the Component Correctly Otherwise you’ll face a type that is invalid — expected a string (for built-in components) or a class/function error.

For Example, I am Trying to Export My Custom Header Then I Must have to Export it Just Like Below.

export default class MyHeader extends React.Component { ... }

You Must have to Use the export default class while Exporting Anything. And then I can Import It Just Like this.

import MyHeader from './MyHeader';

And Now, Your error Must be Solved.

Solution 3: Use This

If You are Trying to Use Variable Instead of Function then you’ll face this error. For Example, I have MyButton Variable that will return Button. And I am trying to use It Then I Will Face This Error. So I Must have to convert it To Function then I Can Use That Function. As Given Below.

const MyButton = () => {  // This Must be Function Not a Variable
  return <button>UpVote</button>;
};

export default function App() {
  return (
    <div>
      <MyButton />
      <h1>Hello World</h1>
    </div>
  );
}

And now, Your error will be solved.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Component definition is missing displayName (react/display-name)
• Maximum update depth exceeded. This can happen when a component repeatedly calls
• Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from
• VS Code ‘!’ or exclamation mark HTML autocomplete not working
• Install for create-react-app latest failed with code 1