DEV Community

Cover image for Getting error while rendering component

Posted on

Getting error while rendering component

Image descriptionWhen 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**

Discussion (2)

fjones profile image
FJones • Edited on

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 vs import { Foo }).

lexlohr profile image
Alex Lohr

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.