Required object argument in JSX.IntrinsicElements

[FrameMuse]

The error happens when running tsc with the following code

interface ArticleProps {
  title: any
  children?: any
  heading?: "h1" | "h2" | "h3"
}

function Article(props: ArticleProps) {
  const Heading = props.heading as keyof JSX.IntrinsicElements
  return (
      <Heading>{props.title}</Heading>
      {props.children}
    </div>
  )
}

The error says there is missing argument object in Heading, I guess because of this type

react-three-fiber/packages/fiber/src/three-types.ts

Line 194 in 9a2c12a

export type PrimitiveProps = { object: any } & { [properties: string]: any }

Without this library, this code is compiled with no error.

Edit:
The problem occurs when trying to use dynamic Heading, relying on keyof JSX.IntrinsicElements, when JSX.IntrinsicElements is extended.

[CodyJasonBennett]

What are you passing as ArticleProps.children?

[FrameMuse]

I just installed this library and after running tsc, this error occurred

[FrameMuse]

As ArticleProps.children I pass string

[FrameMuse]

Oops, I forgot to mention that this happens in Heading

[drcmda]

let's discuss it here for the moment - i know too little about TS but JSX.IntrinsicElements does not contain dom elements, it contains any natire (lowercase) element (div, span, mesh, meshBasicMaterial, ...), maybe that's the issue. primitiveprops only applies to a single native element "primitive" which is executed like this: <primitive object={...} />. it does not apply to anything else.

imo Heading should be a string, or a key of a known list or permissible strings. making it a key of any IntrinsicElement kind of means it will have to adhere to any arbitrary rule that any element exposes.

[FrameMuse]

And I don't like the decision to override JSX.IntrinsicElements.

I think this should be an untouchable global, it's better to make Mesh instead of mesh because it's a custom component and it should be explicitly imported.

[CodyJasonBennett]

I think you described the problem there -- it will inherit definitions from R3F with that typing.

Maybe you should narrow it down to HTMLHeadingElement or JSX.IntrinsicElements['h1'].

[drcmda]

I think this should be an untouchable global, it's better to make Mesh instead of mesh because it's a custom component and it should be explicitly imported.

react is not a dom renderer. despite how TS feels about. the issue is actually with TS, and there have been longstanding issues that are still open. i don't expect them to correct it anytime soon.

importing a page full of elements is not really in our interest atm, that would completely impede the experience. same as it would if you had to do this for the dom.

import { Div, Span, H1, H2, H3, H4, H5, H6, Main, Sidebar, Footer, A, I, B, Br, .... } from 'react-dom'

imagine how insane that would be. generally, if you import a reconciler, you can assume that the intrinsic elements grow, which is happening here. we have to write into that space or else r3f would be typeless. im afraid there is no solution here that we could help you with. Heading has to be typed out better, and given that keyof JSX.IntrinsicElements is completely arbitrary you might as well just make it a string which is what native elements are anyway:

<div /> //React.createElement('div')

thinking of it, i think it even has to be a string, otherwise you would not be able to allow web-components: <Article heading="foo-bar" />

[FrameMuse]

Using HTMLHeadingElement, throws error:
Conversion of type 'string | undefined' to type 'HTMLHeadingElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'string' is not comparable to type 'HTMLHeadingElement'.ts(2352)

Making it as unknown as HTMLHeadingElement, throws error:
JSX element type 'Heading' does not have any constructor call signatures.ts(2604)

Using JSX.IntrinsicElements['h1'], throws error:
JSX element type 'Heading' does not have any construct or call signatures.ts(2604)

[FrameMuse]

import { Div, Span, H1, H2, H3, H4, H5, H6, Main, Sidebar, I, B, Br, .... } from 'react-dom' imagine how insane that would be. generally

Ok, I agree that this would be insane.
May it be better to not override JSX.IntrinsicElements by default, but only when the library is imported?
Only when I have import '@react-three/fiber' in a file.

But I just installed it, without any code of R3F and the error happens in every file in my project.

[FrameMuse]

It doesn't seem pretty but it works when changing

const Heading = props.heading as keyof JSX.IntrinsicElements

to

const Heading = props.heading as unknown as (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element

Although, It might be changed to

const Heading = props.heading as any

[drcmda]

Heading = props.heading as unknown as (props: React.HTMLAttributes) => JSX.Element

this is imo a good solution