My code occured some unknown error.

Questions
, ,
1

This is the Error Code on my code..

import { useGLTF } from "@react-three/drei";
import { Html, useProgress } from "@react-three/drei";
import { useRef } from "react";

function Model() {
  const groupRef = useRef();
  const { nodes, materials } = useGLTF("/BasiliumLogo.gltf");
  console.log(nodes);
  console.log(materials);
  return (
    <group ref={groupRef} dispose={null}>
      <mesh castShadow receiveShadow />
    </group>
  );
}

function Basilium3DLogo() {
  return <Model />;
}

function Basilium3DLogoLoader() {
  const { progress } = useProgress();
  return <Html center>{progress} % loaded</Html>;
}

export { Basilium3DLogo, Basilium3DLogoLoader };

image
image1714Ă—124 32.8 KB

image
image1920Ă—882 147 KB

The question is why this error occur..

The model is located in public/ directory.

Sorry, I try to specify the problem.

I did on my best but I cannot find the specific problem.

Did I miss some concept on R3F?

2

My code occured some unknown error …

… and in an unknown piece of code, too, or so it seems. The code snippet you posted doesn’t even show a line of code trying to reference the object “S”, where the properties can’t be read from … :roll_eyes:

2 Likes
3

I’m sorry that I didn’t upload photo about S..
I upload it!

4

Perhaps check that you’re using compatible versions of React and React Three Fiber? See notes here.

This is an unclear error fairly deep in React’s (minified) internals, I’m not sure we’ll have much luck debugging it from screenshots or snippets sorry. You may need to post a fully reproducible version of the demo (it can be simplified if you can’t share the model, for example) as a .ZIP or link to a GitHub repo perhaps.

3 Likes
5

Yeah, looks very much like a version mismatch.

I think the ReactSharedInternals used to be an unpleasant message about getting fired.

I’m currently using the latest versions:

"three": "^0.174.0",
"@react-three/fiber": "^9.1.0",
1 Like
6

Thank u for ur advice!

I resolve that error!