TypeError: element.setAttribute is not a function.

[theoter]

Hello drei-sters,

I have been struggling with drei a lot when it comes to trying to make it run on device (Android / Expo). Running it on web-browser works but device always returns the Exception error:

TypeError: element.setAttribute is not a function. (In 'element.setAttribute(eventName, 'return;')', 'element.setAttribute' is undefined)
This refers to line 321 of \node_modules\metro\src\lib\polyfills\require.js
This line is:

factory(

            global,
            metroRequire
            metroImportDefault,

etc

I am using 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'; // this causes the error


function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef();

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);

  // Rotate mesh every frame, this is outside of React without 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",
  },
});

import { Sky } from '@react-three/drei' is the part that causes the error, and any drei reference causes this. If I remove that and the reference to it on export default function App(), the project works perfectly on device. The project does work on browser even with drei.

I kindly appreciate advice or just a solid confirmation that drei does not work on device.

edit: changed the title.

[joshuaellis]

released in v2.3.0-beta.1, please track in #221