wcandillon / wcandillon/react-native-webgpu
Cannot read property 'prototype' of undefined when trying the three.js example
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 70
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 23
Description
Getting the error from the title when running the example below (copied from this repo) on a new expo app:
import * as THREE from "three";
import { Canvas, useCanvasEffect } from "react-native-wgpu";
import { View } from "react-native";
import { makeWebGPURenderer } from "./components/makeWebGPURenderer";
export const Cube = () => {
const ref = useCanvasEffect(async () => {
try {
const context = ref.current!.getContext("webgpu")!;
const { width, height } = context.canvas;
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const renderer = makeWebGPURenderer(context);
await renderer.init();
function animate(time: number) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
context.present();
}
renderer.setAnimationLoop(animate);
return () => {
renderer.setAnimationLoop(null);
};
} catch (error) {
console.error(error);
}
});
return (
<View style={{ flex: 1 }}>
<Canvas ref={ref} style={{ flex: 1 }} />
</View>
);
};
Here's the stack from the error:
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'prototype' of undefined
at makeWebGPURenderer (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:233731:36)
at ?anon_0_ (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:194960:67)
at next (native)
at asyncGeneratorStep (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:5554:19)
at _next (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:5568:29)
at anonymous (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:5573:14)
at tryCallTwo (address at InternalBytecode.js:1:1222)
at doResolve (address at InternalBytecode.js:1:2541)
at Promise (address at InternalBytecode.js:1:1318)
at anonymous (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:5565:25)
at ?anon_0_ (http://192.168.1.98:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&excludeSource=true&sourcePaths=url-server&app=com.patrick91.expo-3d&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=1&unstable_transformProfile=hermes-stable:188753:25)
at next (native)
not fully sure where this is coming from :) other examples are working fine, so I tried to also downgrade the version of three, but I still got the same error 🤔
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the reported three.js example in a new Expo app, then inspect the makeWebGPURenderer entry referenced by the stack trace and the imported ./components/makeWebGPURenderer module. Compare the working examples with this renderer setup and confirm that the example runs without the prototype error and can render the cube.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- three.js, typescript
- Domain
- computer-graphics, mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100