Search code examples
reactjstypescriptthree.jsmouseeventreact-three-fiber

ThreeEvent and WheelEvent not recognised in TypeScript & react-three-fiber (@react-three/fiber)

I have a basic mesh box with an onWheel listener, and I want to pass along the mouse event data to a handler function. However, TS throws a series of different errors, and never seems to recognise ThreeEvent or WheelEvent, no matter how I try to use them.

In screenshot 1 you can see that in the onWheel prop TS infers that a ThreeEvent<WheelEvent> is the event type. Yet when I try to type the event in my handler function, I get an error saying three.js has no exported member ThreeEvent (screenshot 2).

I've tried importing via named imports (i.e. import {ThreeEvent/WheelEvent} from "three";, and also using the THREE.ThreeEvent syntax as used in the examples on the react-three-fiber docs. Also, above this line I'm typing a useRef successfully like so: const boxRef = useRef<THREE.Mesh>();

My tsconfig is the basic one from the create-react-app template, and my versions are as follows:

"dependencies": {
    "@react-three/fiber": "^7.0.19",
    "three": "^0.135.0",
    "typescript": "^4.1.2"
}
"devDependencies": {
    "@types/three": "^0.134.0"
}

enter image description here enter image description here

Solution

  • You should install the types for typescript.

    npm install --save @types/three

    Afterwards the types should be available.

    You have issues with your imports, ThreeEvent must be imported from '@react-three/fiber'and WheelEvent from 'react'.

    import { WheelEvent } from 'react';
import { ThreeEvent } from '@react-three/fiber';