I am developing an Android app using React and ThreeJS that allows the user to view a 3D object and rotate the camera. Whenever i try using any @react-three/drei components including either one: OrbitControl, CameraControls, PresentationControls, Stats I get at least 3 different errors:
1. Console Error: The above error occurred in the <ForwardRef> component ...
2. Console Error: The above error occurred in the <ErrorBoundary> component ...
3. Render Error: ReferenceError: Property 'document' doesn't exist
This error is located at:
in Unknown
in FiberProvider
in CanvasWrapper (at App.js:55)
in RCTView (at View.js:116)
in View (at App.js:44)
in App (at withDevTools.js:18)
in withDevTools(App) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes
As it is referencing ‘document’, does @react-three/drei only work for web-based applications? @react-three/fiber is working just fine and I can render a spinning cube with no errors.
My relevant dependencies are:
“@react-three/drei”: “^9.105.5”,
“@react-three/fiber”: “^8.16.2”,
“expo”: “~50.0.14”,
“expo-gl”: “^13.6.0”,
“react”: “18.2.0”,
“react-native”: “0.73.6”,
“three”: “^0.164.1”
My code (stripped down enough just to get the errors):
import { StyleSheet, Text, View, Pressable, SafeAreaView } from 'react-native';
import React from 'react';
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls, Stats , CameraControls } from '@react-three/drei';
export default function App() {
return (
<SafeAreaView style={{flex:1, backgroundColor:"#ffffff"}}>
<Canvas>
<color attach="background" args={["#FAD6A5"]} />
<OrbitControls/>
</Canvas>
</SafeAreaView>
);
}
I appreciate any input. thanks.
What I’ve tried: using different @react-three/drei components to move the camera (OrbitControls, PresentationControls, CameraControls). I also tried downgrading drei to 9.46.4 but got the same errors.
Alex is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.