Can't import MeshProps as shown in readme

[RWOverdijk]

Hei! I am trying to get this party started using typescript and found my first tiny hurdles. Some of these aren't really a big deal and common sense can help, but I still found them interesting.

• The TypeScript example in the readme doesn't import THREE
• There's no mention of needing to install the THREE types
• MeshProps can't be imported from @react-three/fiber. Instead I can only access it through @react-three/fiber/dist/declarations/src/three-types.

Another interesting thing I noticed is that after installing the types for three my IDE gets annoyed with me, saying I'm missing a ton of required attributes. Here's 1/20th of the messages I get:

Element group doesn't have required attribute add 
Element group doesn't have required attribute addEventListener 
Element group doesn't have required attribute animations 
Element group doesn't have required attribute applyMatrix4 
Element group doesn't have required attribute applyQuaternion 

Update: I also noticed that hmr seems a bit wonky when I change the hierarchy. Based on the demo in the README I wrap the two boxes in in a group and get an error saying: "TypeError: Cannot read property 'rotation' of null" coming from the useFrame().

[drcmda]

three-types is new, three's dropped types. i've added a mention of this in the docs. as for jsx type, they must be missing from the main export? @joshuaellis

as for hmr, not sure, normally you must check refs in typescript since they can be null. i don't know exactly what hmr does to the component, i guess it invalidates all refs and the useframe goes out of sync one frame and catches back up. that would only happen on hot reload, not for prop updates and checking it will fix it. i can look into that if there's anything the reconciler does to help us detect hot reload.

[RWOverdijk]

Thanks! The hmr thing is not a huge issue, I can just reload the page and it's not very often I'm changing the hierarchy. Is there something I can do to help? I'm new to this library but I how react works.

[RWOverdijk]

Maybe this helps:

Uncaught TypeError: Cannot read property 'handlers' of undefined

  function cancelPointer(hits) {
    Array.from(hovered.values()).forEach(hoveredObj => {
      // When no objects were hit or the the hovered object wasn't found underneath the cursor
      // we call onPointerOut and delete the object from the hovered-elements map
      if (!hits.length || !hits.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index)) {
        const eventObject = hoveredObj.eventObject;
        const handlers = eventObject.__r3f.handlers; // <<<<< This line
        hovered.delete(makeId(hoveredObj))

This is after reloading and then hovering over the boxes. The other error I just solve by checking if mesh.current has been set or not, and if not I return.

[joshuaellis]

MeshProps sounds like it was exported from ReactThreeFiber. However what would make more sense if you use JSX.IntrinsicElements[‘mesh’] IMO.

THREE has never exported MeshProps.... re installing @types/three, you can thank someone else for that 😅👀

[joshuaellis]

IMO yes, it reduces maintenance overhead, it’s also how I’ve been doing it since I didn’t know we exported those kinds of types 😂

[drcmda]

ok, i get to it

[RWOverdijk]

JSX.IntrinsicElements['mesh'] works fine. I also removed @types/three and I no longer get those messages.

May I ask why JSX.IntrinsicElements[‘mesh’] is better and also why I can remove the types and it still works fine? I don't understand.

In any case thank you for this, it now works as expected :)

[drcmda]

less maintenance. that way we don't have to carry 300 type exports and i guess it's also more obvious whereas "MeshProps" is completely arbitrary. JSX.IntrinsicElements gives you the type of a native element with jsx semantics, that's what you want.

[RWOverdijk]

I just noticed that with IntrinsicElements TS complains that:

TS2339: Property 'set' does not exist on type 'Vector3'.   Property 'set' does not exist on type 'number'.

So instead I just re-installed @types/three and disabled required attribute inspection (I'm using Webstorm). Then switched back to importing Mesh from three which seems to work fine then. Wild ride.

[drcmda]

@RWOverdijk hmr is fixed #1178