Nuanced scenario of 'Canvas is not part of the THREE namespace! Did you forget to extend' Error in React Three Fiber?

Questions
1

It seems like this error has a multitude of issues that result in the same error message and it has been a very overwhelming experience to pin point the problem. I don’t know what to extend here, I can’t extend Canvas as it is?

import React, { useState, useEffect } from "react";
import { Canvas } from "react-three-fiber";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import vertexShader from "../shaders/vertexShader.glsl";
import fragmentShader from "../shaders/fragmentShader.glsl";

const Model = () => {
    const [model, setModel] = useState<THREE.Object3D | null>(null);
  
    // Load model
    useEffect(() => {
      const shaderMaterial = new THREE.ShaderMaterial({
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
      });

      const loader = new GLTFLoader();
      loader.load(
        "/scene.gltf",
        (gltf) => {
          const loadedModel = gltf.scene;
          loadedModel.traverse((child) => {
            if (child instanceof THREE.Mesh) {
              child.material = shaderMaterial; 
            }
          });
          loadedModel.scale.set(75, 75, 75);
          loadedModel.position.set(-75, -75, -75);
          setModel(loadedModel);
        },
        undefined,
        (error) => {
          console.error("Error loading GLTF model:", error);
        }
      );
    }, []); 

    
    return model ? <primitive object={model} /> : null; 
};

const Scene = () => {
    return (
        <Canvas>
          <Model />
        </Canvas>
    );
};
  
export default Scene;
2

Which version of react-three/fiber are you using? Your import looks outdated and should probably be like this…

import { Canvas } from "@react-three/fiber";

You can install the latest version with…

npm install @react-three/fiber

On a side note you can also replace GLTFLoader with useGLTF
from drei

3

I’m wondering now if I should just abandon the repository I am using. It is from 4 years ago, I had sized down to node-version 12 to get it to run initially because I wanted to avoid a death loop of installing every single dependancy all over and my own personal EACCESS errors on my mac using npm. Do you have recommended next js react three repo or do you think it would be easier to even start from scratch?

4

Yes.

Updating to the latest practices is probably the best option for a simple gltf viewer, the docs and resources are really well maintained for pmndrs repo’s