A advantageous way to refer to the various functionalities and characteristics which a value has is called “type” in TypeScript. “Type is invalid — expected a string (for built-in components) or a class/function” is a common error that shows up in many ways. What is the cause of it and how to fix it? Read on this article to find the best solution for this error.

When Do You Get The Error “Type is invalid — expected a string (for built-in components) or a class/function”?

When you run the following program, you will get the error “Type is invalid — expected a string (for built-in components) or a class/function”:

const Sample_Button = <button>Click here</button>;

export default function App() {
  return (
    <div>
      <Sample_Button />
      <h1>Welcome to Tutoria.net</h1>
    </div>
  );
}

You have declared a Sample_Button variable that returns JSX code, so the error happens.

Additionally, there are many other reasons for the error “Type is invalid — expected a string (for built-in components) or a class/function”:

Importing a component and confusing named imports with default imports. Forgetting to export a file’s component. Creating a React component incorrectly, for as by declaring it as a variable rather than a function or class.

How To Fix The Error “Type is invalid — expected a string (for built-in components) or a class/function”?

Solution 1: Utilize a function component

Instead, you must use a function component to fix the error “Type is invalid — expected a string (for built-in components) or a class/function”. Look at the following example to further understand:

const Sample_Button = () => {
  return <button>Click here</button>;
};

export default function App() {
  return (
    <div>
      <Sample_Button />
      <h1>Welcome to Tutoria.net</h1>
    </div>
  );
}

Now, the method Sample_Button may be used to create React components and returns JSX code.

Make careful you import a component without curly brackets if it is exported by utilizing a default export.

export default function Title() {
  return <h2>Hi! Welcome to Tutoria.net</h2>;
}

Curly braces must now be removed before importation.

import Title from './Title';
export default function App() {
  return (
    <div>
      <Title />
    </div>
  );
}

Contrarily, if your component uses a named export to be exported, it must be imported using curly brackets.

export function Title() {
  return <h2>Hi! Welcome to Tutoria.net</h2>;
}

Now, when it is imported, it must be enclosed in curly braces.

import {Title} from './Title';
export default function App() {
  return (
    <div>
      <Title />
    </div>
  );
}

A common problem is when a component is exported as a default export and attempted to be imported as a named import (wrapped in curly braces) or vice versa.

Additionally, ensure that the path leading to the module is correctly cascaded, spelt and that the correct file is being used to export the component. The best approach to ensure that the path is accurate is to remove it, begin entering the path, and use your IDE’s autocomplete feature. Once you begin typing the route, if autocomplete doesn’t appear, your path probably needs to be changed.

Be careful not to conflate the syntax for ES Modules and CommonJS.

Solution 2: Utilize require(path).default

You also can utilize require(path).default to fix the error. Look at the following example.

var YourComponent = require('./components/YourComponent').default

After doing that, your error will be completely resolved.

Solution 3: Utilize react-router-dom

Utilizing react-router-dom rather than react-router is not a bad solution. Look at the following example.

import { Link } from 'react-router-dom'

This method is very simple, isn’t it? However, it works flawlessly for you. Let’s apply it to get your desired results.

Conclusion

You can always read this post again when you’re still stuck on “Type is invalid — expected a string (for built-in components) or a class/function“. The options mentioned above are the quickest. In addition, if you still need help or have problems, we have a large population where everyone is usually eager to help. Finally, we wish all of you a wonderful day full of new code alternatives and appreciate your reading time.

Read more

→ Solving TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app