JSX type errors on React Bootstrap 2.x & Preact 10.x

[TechQuery]

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

Describe the bug

Every React Bootstrap component with Preact has a similar error as shown below:

'Container' cannot be used as a JSX component.
  Its type 'BsPrefixRefForwardingComponent<"div", ContainerProps>' is not a valid JSX element type.
    Type 'BsPrefixRefForwardingComponent<"div", ContainerProps>' is not assignable to type 'FunctionComponent<any>'.
      Type 'ComponentChild' is not assignable to type 'VNode<any>'.
        Type 'string' is not assignable to type 'VNode<any>'.ts(2786)

To Reproduce

• Real World scaffold: https://github.com/idea2app/React-MobX-Bootstrap-ts
• Minimal reproduce: https://codesandbox.io/p/devbox/preact-react-bootstrap-llqsv9?file=%2Fsrc%2Findex.tsx%3A5%2C14

Steps to reproduce the behavior

1. git clone https://github.com/idea2app/React-MobX-Bootstrap-ts
2. npm i
3. npx tsc --noEmit

Expected behavior

No type errors as React does.

[rschristian]

Please provide a minimal reproduction, it's not fair to ask maintainers to browser through a full project.

[TechQuery]

Please provide a minimal reproduction, it's not fair to ask maintainers to browser through a full project.

@rschristian That repository is not a full project, it's just a scaffold with some simple example pages, but almost every page & component has the same type errors...

[rschristian]

Anything more than a few files in src is non-minimal. Please clear it out to the minimum that is required to demonstrate the issue.

This is the example StackBlitz we provide in the bug template, which is just about ideal for a web reproduction. For type errors you could certainly go even more minimal.

[TechQuery]

This is the example StackBlitz we provide in the bug template, which is just about ideal for a web reproduction.

Thanks, but Parcel 2.x is my real bundler, not Vite: https://codesandbox.io/p/devbox/preact-react-bootstrap-llqsv9?file=%2Fsrc%2Findex.tsx%3A5%2C14

[rschristian]

Build tooling isn't likely to matter in a types issue, but regardless, it's just an example of scope that's appropriate. But thanks, the minimal repro does help.

Looks like we'll need to widen FunctionComponent to return ComponentChild as React does, but that seems to cause havoc in our tests:

-   (props: RenderableProps<P>, context?: any): VNode<any> | null; 
+   (props: RenderableProps<P>, context?: any): ComponentChild;

https://github.com/preactjs/preact/blob/eb3767723d43e8a38453efc28d187810edfa4231/src/index.d.ts#L90

Will need to play around with this for a bit.

[TechQuery]

Looks like we'll need to widen FunctionComponent to return ComponentChild as React does, but that seems to cause havoc in our tests:

- (props: RenderableProps<P>, context?: any): VNode<any> | null; 
+ (props: RenderableProps<P>, context?: any): ComponentChild;

https://github.com/preactjs/preact/blob/eb3767723d43e8a38453efc28d187810edfa4231/src/index.d.ts#L90

My Web components engine may have the same issue😂

https://github.com/EasyWebApp/WebCell/blob/28b30a187fc2672cfaa145707d0df2014b630a1d/source/decorator.ts#L22

(PReact's JSX type definition is my major reference instead of confusing @types/react, I have a big thank to you guys.)