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

When we develop React App, sometimes we fetch "Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object". You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports or you might have mixed up require and import.

There are two ways to export our components

export const componentName

or

export default componentName

If we export our component this way

export const componentName

we must be import our component this way

import { componentName } from "<path/componentname>"

Or if we export our component this way

export default componentName

we must be import our component this way

import componentName from "<path/componentname>"

There is a question, why should we follow these rules? Now time to explain, we export lots of pieces by "export const" in the component and export one specific piece from the component by "export default". When we use "export const" then we need to specify that which pieces we needed in import part.