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

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

by

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.

Contents
  1. How type is invalid — expected a string (for built-in components) or a class/function Error Occurs?
  2. How To Solve type is invalid — expected a string (for built-in components) or a class/function Error?
  3. Solution 1: Import Like this
  4. Solution 2: Export Like this
  5. Solution 3: Use This
  6. Conclusion

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?

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

    To Solve type is invalid — expected a string (for built-in components) or a class/function Error 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, if 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.

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

    To Solve type is invalid — expected a string (for built-in components) or a class/function Error 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 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

Leave a Comment