0

I don't quite understand the error. How can I fix it or what can I do?

I have three-xr included in my react app but I get this error:

Failed to compile.
../../node_modules/@react-three/xr/src/DefaultXRControllers.tsx:8:65
Type error: Property 'object3D' does not exist on type 'IntrinsicElements'.

   6 | import { XRController } from './XRController'
   7 | 
>  8 | export interface RayProps extends Partial<JSX.IntrinsicElements['object3D']> {
     |                                                                 ^
   9 |   /** The XRController to attach the ray to */
  10 |   target: XRController
  11 |   /** Whether to hide the ray on controller blur. Default is `false` */

My code:

import { DefaultXRControllers, ARCanvas } from '@react-three/xr'

<ARCanvas camera={{ position: [0, 0, -0.3] }}>
  <React.Suspense fallback={false}>
    <ambientLight />
    <mesh position={[0, 0, 0]} scale={0.008}>
    <Model
       path={threeModelSrc}
       position={[0, -1.6, 0]}
       scale={0.75}
    />
    </mesh>
    <pointLight position={[10, 10, 10]} />
    <DefaultXRControllers />
    </React.Suspense>
</ARCanvas>
redlightfilms
  • 193
  • 1
  • 4
  • 13

1 Answers1

0

It's been a while, but I've got a couple of ideas that might solve your problem if you're still stuck

Three.js and @react-three/fiber are dependencies of @react-three/xr, so you need to make sure that you've got them installed npm i three @react-three/fiber. Also it looks like you're using typescript so make sure to run npm i @types/three --save-dev as well. If you've already installed those dependencies, then make sure that the versions of three and @types/three match up in your package.json.

If nothing in the previous paragraph works, then you might have some conflicting dependencies in your project. This happened to me recently where I had another package that was using a much earlier version of three and @react-three/xr decided to use that version instead of the one that I had installed. I had to remove the package that was providing the bad version of three in order to fix it. The best way that I know of to track down a conflicting dependency like that is to remove three and @react-three/xr, delete node_modules, and then do an npm i. After that finishes search the package-lock.json for any references to three. If you find any, then those packages could be your culprit.

Hope that helps, cheers!

Täuscherpferd
  • 41
  • 6