When I am importing component to render I am getting error
**react-jsx-dev-runtime.development.js:117 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) 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.
Check your code at Page.js:11.
at Page**
Top comments (2)
You're probably assigning a non-string-or-function to a variable and trying to have that rendered as a component.
const Foo = <div />; return <Foo />
or somesuch. That won't work, because it will be transpiled from jsx into something like this:const Foo = jsx("div", ...); return jsx(Foo, ...);
, which is invalid.The error message relates to another common way this happens: getting your import wrong (
import Foo
vsimport { Foo }
).Without looking at your code, we could only offer wild guesses. But since you already have your dev tools open, go to the source tab and add a breakpoint at react-jsx-dev-runtime.development.js:117 and have a look at the stack trace once you're there.