Property 'meshLine' does not exist on type 'JSX.IntrinsicElements'. ( Typescript JSX support)

[Ezall2001]

I guess you need to include a declare file for the custom jsx elements.

[rob2d]

Just in case this saves anyone time, you can augment the JSX R3F element types via including this module extension:

import {
  MeshLine,
  MeshLineGeometry,
  MeshLineMaterial
} from '@lume/three-meshline';
import { Object3DNode, MaterialNode } from '@react-three/fiber';

declare module '@react-three/fiber' {
  interface ThreeElements {
    meshLineGeometry: Object3DNode<MeshLineGeometry, typeof MeshLineGeometry>;
    meshLineMaterial: MaterialNode<MeshLineMaterial, typeof MeshLineMaterial>;
    meshLine: Object3DNode<MeshLine, typeof MeshLine>;
  }
}

Also agree that it would be nice if it were included, but it seems since it only extends THREE.Line and not R3F, that it makes sense. Perhaps it could help to have it documented though.

[trusktr]

Sorry for the late reply!

Yeah, that's an r3f issue, and this library has no idea r3f exists. So the solution is to either

• place the type def in your app
• or place it in r3f directly if r3f should support it

Or in other words, this lib has nothing to do with r3f, so putting declare module '@react-three/fiber' ... inside of this package would not make sense for this lib, just the same as putting that inside of three lib would not.

Docs for that are here:

https://docs.pmnd.rs/react-three-fiber/tutorials/typescript#extending-threeelements

That has to be in the app, or in r3f.

[trusktr]

Thanks for making the suggestion!