-1

When I export the following component, why do I get the errors Expected a string (for built-in components) or a class/function (for composite components) but got: <Fragment />. Did you accidentally export a JSX literal instead of a component? and Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object?

const MyComponent = (
    <>
        <h1>Hello</h1>
        <div>Lorem Ipsum</div>
    </>
)
export default MyComponent

This question is not the same as the linked questions. It relates to a specific error someone might find and google.

C_Z_
  • 7,427
  • 5
  • 44
  • 81
  • You know that `MyComponent` is a `JSX.Element` and not an actual component, right? If you want to export a `JSX.Element` and get an error, make a question about that with more clear naming. – kajacx Oct 15 '20 at 10:47

1 Answers1

0

The solution is to change the component into a function:

const MyComponent = () => (
    <>
        <h1>Hello</h1>
        <div>Lorem Ipsum</div>
    </>
)
export default MyComponent

If you are using typescript, the return type is React.ReactElement

C_Z_
  • 7,427
  • 5
  • 44
  • 81