close

[Solved] Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Today I am trying to import my custom component but it is failing with the following error Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object Error Occurs ?

I am trying to import my custom component but it is failing with the following error.

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

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

How To Solve Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object Error ?

  1. How To Solve Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object Error?

    To Solve Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object Error You need to use require(path).default Here is my example: var YourComponent = require('./components/YourComponent').default And now, your error must be solved.

  2. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

    To Solve Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object Error If You are using webpack then You should import your component without {} and that was worked for me. Here is my example: import YourComponent from '../components/your_component.js'; And My error was solved hopefully your error was also solved.

Solution 1: for webpack

If You are using webpack then You should import your component without {} and that was worked for me. Here is my example.

import YourComponent from '../components/your_component.js';

And My error was solved hopefully your error was also solved.

Solution 2: Use require(path).default

You need to use require(path).default Here is my example.

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

And now, your error must be solved.

Solution 3: Use react-router-dom

Use react-router-dom instead of react-router Just like below code.

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

Now, your error should be fixed.

Summary

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

Also, Read

Leave a Comment