wcandillon / wcandillon/react-native-webgpu

Cannot read property 'prototype' of undefined when trying the three.js example

Open
#198 1 comment 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.