React-3-fiber error trying to display .glTF file from useLoader

Questions
1

Hello, I am getting the following error when trying to render a simple .glTF image with React-3-fiber.

Code

//@ts-nocheck
import {Canvas, useFrame, useLoader} from “@react-three/fiber”;
import {useRef, Suspense, useEffect, startTransition} from “react”;
import cube from “…/…/…/public/cube.gltf”;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’;

export default function FiberProto() {

const gltf = useLoader(GLTFLoader, cube);
const [startTransition, isPending] = useTransition({ timeoutMs: 3000 });

return (
Canvas
Suspense fallback={null}
primitive object={gltf.scene}
Suspense
Canvas
);

}

(removed markup from return I assume its being scrubbed)

I get the following error,

image
image1448×163 11.6 KB

I’ve tried to remove the tag entirely, and tried supplying it with different fallback components, but I still get the same crash

Edit: My project was misconfigured, it was showing it was on React 18 but it was actually on React 17 and fixing that resolved the issue

2

that is not a path. this is not related to threejs, react or fiber but bundling. you can’t import from public, public is not a directory that exists. contents of public will be copied into /dist when the bundler is done. you also can’t import anything outside of your /src folder, that’s just not how it works.

public is for static files only. you access them with a string: useLoader(GLTFLoader, “/cube.gltf”). the same applies to jpg’s, svg’s, jsons, anything you put into public is accessible by browser fetch, NOT import.

btw, ... does not exist on the web. it would be ../../ but either way, for the reasons above it wouldn’t work still.

3

use this as a reference: React Three Fiber Documentation most of these boxes use assets like glb’s.

4

Thank you very much