Sometimes, we want to fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React.
In this article, we’ll look at how to fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React.
How to fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React?
To fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React, we should make sure we don’t confuse named and default imports.
For instance, we write
import { MyComponent } from "../components/xyz.js";
to import the MyComponent as a named import.
The name matters in a named import.
If MyComponent is a default export, then we write
import MyComponent from "../components/xyz.js";
to import it.
Conclusion
To fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React, we should make sure we don’t confuse named and default imports.
