Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got

The error “Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got” may occur due to several reasons:

1. Declared a variable with JSX code instead of a function
2. Trying to import named export without curly braces
3. Trying to import default export with curly braces

Declared a variable with JSX code instead of a function

The below code will throw the error.

function App() {
	// This line throws error: 
	// Element type is invalid: expected a string (for built-in components) 
	// or a class/function (for composite components) but got: object.
  	const Message = <label>Hello world!</label>;
  	return (
    	<div>
      		<Message/>      
    	</div>
  	);
}

export default App;

In the above code, the Message is a variable that stores the JSX code <label>Hello world!</label>. But Message variable cannot be used as a component unless it is not a function. React components should be a function or class that returns HTML.

Read react doc to learn how to create a React component.

To solve the error, change Message variable to a function that returns JSX code as given below.

function App() {
  	const Message = () => <label>Hello world!</label>;
  	return (
    	<div>
      		<Message/>      
    	</div>
  	);
}

export default App;

Trying to import named export without curly braces

When you try to import named export without curly braces may occur error: Element type is invalid.

The below code shows how to declare named exports:

export function Message() {
    return (
        <label>Hello world!</label>
    );
}

The below code shows how to import named exports:

import {Message} from './Message';

For importing named exports, you should be wrapped in curly braces as import {Message} from './Message';.

Trying to import default export with curly braces

When you try to import the default export with curly braces occurs the error “Element type is invalid”.

The below code shows how to declare default exports:

export default function Message() {
    return (
        <label>Hello world!</label>
    );
}

The below code shows how to import default exports:

import Message from './Message';

You may be noticed that we are not used curly braces to import default exports.

You can have multiple named exports in a file, but only a single default export.

Also, you can mix multiple named exports with default export as below.

export default function Message() {
    return (
        <label>Hello world!</label>
    );
}

export function MyComponent1(){
    return (
        <label>MyComponent1</label>
    );
}

export function MyComponent2(){
    return (
        <label>MyComponent2</label>
    );
}

Import default and named exports as:

import Message, {MyComponent1, MyComponent2} from './Message';

Conclusion

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 you are not declaring a variable with JSX code instead of a function. Also, make sure you are not importing named export without curly braces or not importing default export with curly braces. Check that the named and default imports are correct.