Conflict with @types/react svg types in JSX.IntrinsicElements

[hasparus]

Hi! I've encountered a little problem while using react-three-fiber in TypeScript.
@types/react conflicts with three-types.d.ts on global JSX.IntrinsicElements.

Is there a workaround to avoid it?

(property) JSX.IntrinsicElements.line: React.SVGProps<SVGLineElement>
Subsequent property declarations must have the same type. 
Property 'line' must be of type 'SVGProps<SVGLineElement>',
but here has type 'Object3DNode<Line, typeof Line>'.
ts(2717)

---

Repro: https://codesandbox.io/s/react-three-fiber-types-conflict-repro-ydr2t
(CodeSandbox seems to be few TS versions behind so there's another problem there -- Omit type is not defined, and because of it Object3DNode is any. The conflict I mentioned still occurs regardless of it.)

[drcmda]

unfortunately this is a TS bug, there are issues on their GH already, but microsoft keeps sticking dom types into the generic jsx definitions. i believe they think jsx is for the dom only.

main issue: DefinitelyTyped/DefinitelyTyped#24433

microsoft/TypeScript#15266

microsoft/TypeScript#12754

at work we have resorted to a really ugly workaround, we use line_ instead of line for instance:

import * as THREE from 'three'
import { ReactThreeFiber } from 'react-three-fiber'

declare global {
  // tslint:disable-next-line: no-namespace
  namespace JSX {
    // tslint:disable-next-line: interface-name
    interface IntrinsicElements {
      line_: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
    }
  }
}

and then

import * as THREE from 'three'
import { Canvas, extend } from 'react-three-fiber'

extend({ Line_: THREE.Line })

...

<Canvas>
  <line_ geometry={...} />
</Canvas>

[drcmda]

Got some valuable input on Twitter https://twitter.com/0xca0a/status/1163035106472341505?s=19

[hasparus]

Thanks @drcmda! This is way better than my workaround :)

const t = {
  line: ('line' as any) as ((
    _: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
  ) => JSX.Element),
};

function Thing({ vertices }) {
  return (
      <t.line
        onPointerDown={e => console.log(e)}
        onUpdate={line => console.log(line)}
      >
        <geometry
          attach="geometry"
          vertices={vertices.map(v => new THREE.Vector3(...v))}
          onUpdate={self => (self.verticesNeedUpdate = true)}
        />
        <lineBasicMaterial attach="material" color="black" />
      </t.line>
  );
}

Well, JSXAttributes isn't the best thing about TypeScript TBH.

[hasparus]

Okay, so according to what Sebastian Markbåge said about what React Native is doing, lying about the type is a recommended solution.

With dynamic runtime eval (/ generated wrappers) the types would probably go somewhere in this direction 🙈

type ThreeFiberJsx = {
  [P in keyof typeof THREE]: (typeof THREE)[P] extends (new () => Object3D)
    ? React.FC<
        ReactThreeFiber.Object3DNode<
          InstanceType<(typeof THREE)[P]>,
          (typeof THREE)[P]
        >
      >
    : never // GeometryNodes etc
};

[hasparus]

I feel we can close this issue -- it overlaps with #11 .

[drcmda]

i reopened b/c that would be a feasible thing we could do. maybe a 3.x milestone? im still on vacation, but let's just keep this around, it could solve all our troubles. :-)

[drcmda]

we can continue here: #189

[codynova]

@drcmda Can you help me understand this proposed workaround? Is this meant to overwrite the typings that live in react-three-fiber/types/src/three-types.d.ts? I can't seem to get it working even with this declaration in my app entry file. I should note that I'm seeing the "Subsequent property declarations must have the same type." errors being emitted from three-types.d.ts without actually attempting to import or use line or audio.

import * as THREE from 'three'
import { ReactThreeFiber } from 'react-three-fiber'

declare global {
  // tslint:disable-next-line: no-namespace
  namespace JSX {
    // tslint:disable-next-line: interface-name
    interface IntrinsicElements {
      line_: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
    }
  }
}

and then

import * as THREE from 'three'
import { Canvas, extend } from 'react-three-fiber'

extend({ Line_: THREE.Line })

...

<Canvas>
  <line_ geometry={...} />
</Canvas>

[drcmda]

this is what i saw in our project at work, but i don't know ts deep enough to know how it works. they seem to override these type. the extend function is clear but not the rest. i think better ask on spectrum, someone probably knows it.

[hasparus]

@codynova
This is half of the workaround. The first snippet is doing declaration merging, so you TypeScript knows about extend({ Line_: THREE.Line }) and use line_ with typechecking and autocomplete.

To get rid of errros you need to remove conflicting types from three-types.d.ts (audio and line) and patch package this file.

---

i think better ask on spectrum, someone probably knows it

Sorry for answering here, but I couldn't find @codynova's question on Spectrum 😅.