line and typescript issue

[net5566]

I follow https://codesandbox.io/embed/react-three-fiber-line-1v25t

I use this section to draw lines

const Scene = () => {
  const ref = useRef<any>(null);
  const points = []
  points.push(new THREE.Vector3(-10, 0, 0))
  points.push(new THREE.Vector3(0, 10, 0))
  points.push(new THREE.Vector3(10, 0, 0))
  points.push(new THREE.Vector3(15, 0, 0))
  points.push(new THREE.Vector3(0, 10, 0))

  const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)

  return (
    <>
      <group position={[0, -2.5, -10]}>
        <line ref={ref} geometry={lineGeometry}>
          <lineBasicMaterial attach="material" color={'#9c88ff'} linewidth={10} linecap={'round'} linejoin={'round'} />
        </line>
      </group>
    </>
  );
}

When I use const ref = useRef<THREE.Line>(null);
My gulp shows

error TS2322: Type 'MutableRefObject<Line<BufferGeometry, Material | Material[]>>' is not assignable to type 'LegacyRef<SVGLineElement>'.
  Type 'MutableRefObject<Line<BufferGeometry, Material | Material[]>>' is not assignable to type 'RefObject<SVGLineElement>'.
    Types of property 'current' are incompatible.
      Type 'Line<BufferGeometry, Material | Material[]>' is missing the following properties from type 'SVGLineElement': x1, x2, y1, y2, and 226 more.

When I use const ref = useRef(null);
My gulp shows

error TS2322: Type '{ children: Element; ref: MutableRefObject<any>; geometry: BufferGeometry; }' is not assignable to type 'SVGProps<SVGLineElement>'.
  Property 'geometry' does not exist on type 'SVGProps<SVGLineElement>'.

package versions

    "@react-three/fiber": "^6.2.0",
    "@types/three": "^0.128.0",
    "react": "^16.9.0",
    "three": "^0.128.0",
    "typescript": "^4.2.4",
    "gulp": "^4.0.2",
    "gulp-typescript": "^6.0.0-alpha.1",

[drcmda]

line is reserved by the dom. unfortunately this is a typescript bug. they assume that react is dom-only, there are open issues for this.

the workaround

import { ReactThreeFiber, extend } from '@react-three/fiber'

extend({ Line_: THREE.Line })

declare global {
  namespace JSX {
    interface IntrinsicElements {
      line_: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
    }
  }
}

<line_ ... />

same applies to <audio /> unfortunately.

@joshuaellis should we maybe type line_ and audio_ by default? then at least we won't have to pierce into the global types like that.

[net5566]

import { ReactThreeFiber } from '@react-three/fiber'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      line_: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
    }
  }
}

<line_ ... />

After using this... typescript error disapear

However, after npm start, the app is broken.

dev tool shows react-three-fiber.esm.js:1489 Uncaught Line_ is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively

[joshuaellis]

@drcmda

should we maybe type line_ and audio_ by default? then at least we won't have to pierce into the global types like that.

Not sure I understand what you're suggesting? I don't think we should be patching this on our end to be honest. This is a bug with another repo, this workaround while not ideal is sufficient until it's resolved.

[drcmda]

import { ReactThreeFiber } from '@react-three/fiber'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      line_: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
    }
  }
}

<line_ ... />

After using this... typescript error disapear

However, after npm start, the app is broken.

dev tool shows react-three-fiber.esm.js:1489 Uncaught Line_ is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively

sorry, forgot the extend.

Not sure I understand what you're suggesting? I don't think we should be patching this on our end to be honest. This is a bug with another repo, this workaround while not ideal is sufficient until it's resolved.

makes sense. although this will probably never be fixed. the issue has been open for years.

[net5566]

@drcmda thanks for your reply

I'm not sure how to extend line_ in this case.

I add extend({ line_ }); directly, and linter says
No value exists in scope for the shorthand property 'line_'. Either declare one or provide an initializer.ts(18004)

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Canvas, ReactThreeFiber, extend, useFrame, useThree } from '@react-three/fiber';
import { MapControls } from '@react-three/drei';
import * as THREE from 'three';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      line_: ReactThreeFiber.Object3DNode<THREE.Line, typeof THREE.Line>
    }
  }
}

extend({ line_ });