Getting error when using GLTFLoader

[potent girder]

I am following along the Load a .GLTF file article from the manual and when I try to load the example model I get an RangeError. I am using React and serving with vite.

When i looked in the network tab in the inspector, the img file used for the texture shows that it has been downloaded but the actual size of the file is 0 B, the response is empty, and the preview shows the missing img icon. I have a hunch this has something to do with the error but i am fully stumped.

I've spent hours googling and chatting with ai about this. It would make my day if anyone could help me with this : )

I've attached my code and the error msg with the full stack trace:

[rare oasis]

the first move to try when a model fail, is to test it with
https://gltf-viewer.donmccurdy.com/

this way you can pinpoint if your code is involved, or the model has an issue.
If Mc Curdy's page fail completely (console warnings are fine), it's definitively the way the model was exported/created.
If the page load the model, it's in your code.

[potent girder]

Yeah, the model loaded fine in the viewer u linked

[rare oasis]

good, now we know it's the code.
I have doubts about the way you draw the mesh.

generally when you try to filter the content of the model like this
const root = gltf.scene;
it's because you traverse it

something like..

gltfLoader.load( url, function (gltf) {

  //target/search something inside the file
  const content = gltf.scene;

  content.traverse( function ( child ) {
    if ( child.isMesh ) { //filter to get a mesh inside the file
      //draw the mesh on scene
      scene.add( child );
    }

  });//end traverse

});//end loader

Otherwise i don't see the point.
You may just scene.add( gltf.scene );
to draw all the content of the file inside a 3D object

try using my function, it's old fashioned (no ' =>' ) and very basic.
you can also try to use console.log(child) and see if the URL is actually good and output a mesh object in the console.