TypeError: element.setAttribute 不是函數 (React Native / Three.js)

Question

在嘗試使其在設備（Android/Expo）上運行時，我一直在與 drei（用於反應三纖維的助手集合）作斗爭。 在網絡瀏覽器上運行它可以工作，但設備總是返回異常錯誤：

TypeError: element.setAttribute is not a function. (In 'element.setAttribute(eventName, 'return;')', 'element.setAttribute' is undefined)

這是指\\node_modules\\metro\\src\\lib\\polyfills\\require.js的第321行這一行是：

factory(

            global,
            metroRequire
            metroImportDefault,

等等

我正在使用默認代碼：

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' 是導致錯誤的部分，任何 drei 引用都會導致此錯誤。 如果我在導出默認函數 App() 上刪除它和對它的引用，則該項目在設備上完美運行。 即使使用 drei，該項目也可以在瀏覽器上運行。

我非常感謝您的建議或只是確認 drei 在設備上不起作用。

Answer 1

Element.setAttribute()是HTMLElements使用的HTMLElements 。 你可以在這里閱讀它。 它在瀏覽器上工作的原因是因為它可能會創建一個元素，例如<div>或<img>或其他東西，然后在其上調用 setAttribute 。 但是，當您嘗試導出到設備時，該功能不可用，因為它不是一個完整的 HTML 瀏覽器，並且它沒有它的所有功能。

當你創建一個元素時，它返回undefined並且undefined.setAttribute()不是一個函數。

我認為您將不得不進入drei的源代碼並尋找它發生的位置，看看您是否可以創建該模塊的副本並刪除它試圖在不破壞構建的情況下創建HTMLElement的行。