[英]TypeError: element.setAttribute is not a function (React Native / Three.js)
I have been struggling with drei (a collection of helpers for react three fiber) when it comes to trying to make it run on device (Android / Expo).在尝试使其在设备(Android/Expo)上运行时,我一直在与 drei(用于反应三纤维的助手集合)作斗争。 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:这是指\\node_modules\\metro\\src\\lib\\polyfills\\require.js的第321行这一行是:
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. import { Sky } from '@react-three/drei' 是导致错误的部分,任何 drei 引用都会导致此错误。 If I remove that and the reference to it on export default function App(), the project works perfectly on device.如果我在导出默认函数 App() 上删除它和对它的引用,则该项目在设备上完美运行。 The project does work on browser even with drei.即使使用 drei,该项目也可以在浏览器上运行。
I kindly appreciate advice or just a solid confirmation that drei does not work on device.我非常感谢您的建议或只是确认 drei 在设备上不起作用。
Element.setAttribute()
is a method used by HTMLElements
. Element.setAttribute()
是HTMLElements
使用的HTMLElements
。 You can read about it here . 你可以在这里阅读它。 The reason it works on browser is because it probably creates an element, like a <div>
, or <img>
or something, and then it calls setAttribute on it.它在浏览器上工作的原因是因为它可能会创建一个元素,例如<div>
或<img>
或其他东西,然后在其上调用 setAttribute 。 However, when you try to export to device, that function is not available because it's not a full HTML browser, and it doesn't have all its capabilities.但是,当您尝试导出到设备时,该功能不可用,因为它不是一个完整的 HTML 浏览器,并且它没有它的所有功能。
When you create an element, it returns undefined
and undefined.setAttribute()
is not a function.当你创建一个元素时,它返回undefined
并且undefined.setAttribute()
不是一个函数。
I think you're going to have to go into the source code of drei
and look for where it's happening to see if you can create a copy of that module and remove the lines where it attempts to create an HTMLElement
without breaking the build.我认为您将不得不进入drei
的源代码并寻找它发生的位置,看看您是否可以创建该模块的副本并删除它试图在不破坏构建的情况下创建HTMLElement
的行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.