Types for JSX.Element don't work for components that have children in their interface

[lifeiscontent]

• [ ] Check if updating to the latest Preact version resolves the issue

Describe the bug if I have a component that returns children directly, it results in a type error.

To Reproduce

https://codesandbox.io/s/ecstatic-montalcini-ter683?file=/src/index.tsx

Steps to reproduce the behavior:

1. Go to 'index.tsx'
2. See type errors

Expected behavior Not to have type error when returning children

[ConcernedHobbit]

ComponentChildren is not necessarily one renderable value. It can be an array, and you cannot return multiple siblings without a parent node. It could also be a string, in which case it requires a parent as well. Try setting App's return to be just "Hello" and you'll see an error as well.

Solution: Wrap the Element's return value in a Fragment.

You could also do some custom validation to check that what has been passed to the function is just one renderable element.

[lifeiscontent]

@ConcernedHobbit what you've described has nothing to do with the issue I've outlined, its a well known fact that the entire JSX ecosystem cannot return strongly typed children, however things like Arrays are returnable by React and other frameworks as its still considered a single value but with a fragment you're adding a DocumentFragment to the element which might introduce a runtime difference in certain code. What you've suggested is not a solution for this issue.

[ConcernedHobbit]

@lifeiscontent How do you suppose your element would work in JSX typing? Is the intended behaviour that when it is a child component it would understand that and would not error in typing? I don't think React supports this with FC or ReactNode typings, is there a semantic difference with preact here?

Edit: Seems like I did misunderstand, PropsWithChildren without explicit return type would work in this case in React.

[JoviDeCroock]

My fix introduced a bug, undid for now but will keep looking at it

[lifeiscontent]

@ConcernedHobbit Yeah, basically any value that react accepts as children I'd expect preact to do the same, and as just raw JS, preact appears to have the same behavior as React here.

e.g: null, array boolean number string etc