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 ?
- 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 ?
- Solution 1: for webpack
- Solution 2: Use require(path).default
- Solution 3: Use react-router-dom
- Summary
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 ?
- 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.
- 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