(React) Element type is invalid, expected a string (for built in components) or a class/function but got

avatar

Borislav Hadzhiev

Tue Apr 05 20223 min read

banner

Photo by Anthony Fomin

(React) Element type is invalid, expected a string (for built in components) or a class/function but got #

The error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got" occurs for multiple reasons:

  1. Mixing up default and named imports when importing a component.
  2. Forgetting to export a component from a file.
  3. Incorrectly defining a React component, e.g. as a variable instead of a function or class.

type-is-invalid-expected-string-but-got

To solve the error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got", make sure to import named exports using curly braces and default exports without, and only use functions or classes as components.

Here is one example of how the error occurs.

App.js
// 👇️ must be function or class (NOT variable) const Button = <button>Click</button>; export default function App() { // ⛔️ Warning: React.jsx: type is invalid -- expected a string // (for built-in components) or a class/function // (for composite components) but got: return ( <div> <Button /> <h1>hello world</h1> </div> ); }

The issue in the code snippet is that we have declared a Button variable that returns JSX code.

To solve the error, we have to use a function component instead.

App.js
// 👇️ is now function const Button = () => { return <button>Click</button>; }; export default function App() { return ( <div> <Button /> <h1>hello world</h1> </div> ); }

Now Button is a function that returns JSX code and can be used as a react component.

Another common cause of the error is mixing up default and named imports and exports.

When a component is exporting using a default export, you have to make sure to import it without using curly braces.

Header.js
// 👇️ default export export default function Header() { return <h2>Hello world</h2>; }

Now, it has to be imported without curly braces.

App.js
// 👇️ default import import Header from './Header'; export default function App() { return ( <div> <Header /> </div> ); }

On the other hand, if your component is exported using a named export, it has to be imported using curly braces.

Header.js
// 👇️ named export export function Header() { return <h2>Hello world</h2>; }

Now, it has to be wrapped in curly braces when importing.

App.js
// 👇️ named import import {Header} from './Header'; export default function App() { return ( <div> <Header /> </div> ); }

Make sure you are not exporting a component as a default export and trying to import it as a named import (wrapped in curly braces) or vice versa because this is a common cause of the error.

If the error is not resolved after making the necessary changes, make sure to restart your development server and your IDE if necessary.

You should also ensure that the path that points to the module is spelled correctly, the casing is correct and the specific file exports the component.

The best way to make sure the path is correct is to delete it, start typing the path and let your IDE help you with autocomplete.

If you aren't getting autocomplete once you start typing the path, chances are your path is incorrect.

Make sure you don't mix up the ES Modules and CommonJS syntax.

You should only use the import/export syntax in your React.js app and not the module.exports or require() syntax.

The error also sometimes occurs when we import something from react-router instead of react-router-dom.

App.js
// ⛔️ BAD // import {Link} from 'react-router'; // ✅ GOOD import {Link} from 'react-router-dom';

If you use react router, make sure to import from react-router-dom and not from react-router.

The error message "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:" occurs when we try to use something that is not a function or class as a component.

You should look at the error message right after got: and it could help you debug what the thing that causes the error is.

When we use a component, we have to make sure it is either a function or a class. If you use any other value as a component, the error is caused.

Use the search field on my Home Page to filter through my more than 1,000 articles.