Struggling with implementing drei (a collection of helpers for react three fiber) on Android / Expo devices. While it works fine on web browsers, the device consistently throws an Exception error:
TypeError: element.setAttribute is not a function. (In 'element.setAttribute(eventName, 'return;')', 'element.setAttribute' is undefined)
The issue can be traced back to line 321 in \node_modules\metro\src\lib\polyfills\require.js This specific line reads:
factory(
global,
metroRequire
metroImportDefault,
Facing this problem while utilizing the default code:
import React, { useRef, useState } from "react";
import { StyleSheet, View } from "react-native";
import { Canvas, useFrame } from "react-three-fiber";
import { Sky } from '@react-three/drei'; // triggering the error
function Box(props) {
// This reference provides direct access to the mesh
const mesh = useRef();
// State management for hover and activate states
const [hovered, setHover] = useState(false);
const [active, setActive] = useState(false);
// Mesh rotation per frame without React overhead
useFrame(() => {
if (mesh && mesh.current) {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
}
});
return (
<mesh
{...props}
ref={mesh}
scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
onClick={(e) => setActive(!active)}
onPointerOver={(e) => setHover(true)}
onPointerOut={(e) => setHover(false)}
>
<boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
<meshStandardMaterial
attach="material"
color={hovered ? "blue" : "red"}
/>
</mesh>
);
}
export default function App() {
return (
<View style={styles.container}>
<Canvas>
<ambientLight />
<Sky />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "black",
},
});
The error occurs when using import { Sky } from '@react-three/drei', any drei reference triggers this issue. Removing it and its references enables the project to run smoothly on devices. The project functions normally on browsers even with drei.
Seeking advice or confirmation that drei may not be compatible with devices.