# Any file load attempt fails with uncaught exception

**URL:** <https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [May 7, 2020, 1:58pm UTC](https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998 "2020-05-07T13:58:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgamble](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kgamble](https://discourse.threejs.org/u/kgamble)\
**Post date:** [May 7, 2020, 1:58pm UTC](https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998/1 "2020-05-07T13:58:50Z")

</div>

I am displaying a WebGL renderer, written in typescript with React, any I am able to display my renderer, create geometry, interact with it and everything.

However anytime I try to use a loader (I have tried both Loader and GLTFLoader) I recieve an error in the runtime when the loader goes to collect either a local file or a file over http.

Currently I have it pointing directly to one of the free threejs resources, to make sure that I am pointing to a valid file, and just trying to print the data at each stage of the load.

```
this.loader.load('https://threejsfundementals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf'
      , function ( gltf: any ) { console.log(gltf);
    } , function (xhr: any ) { console.log(xhr); 
    }, function (e: any) { console.log(e);
    }
);

```

In the runtime, I only see the data printed from the onProgress(xhr) callback, and the onLoad(gltf) and onError(e) functions are never called. However I recieve the following error immediately after the onProgress callback prints

```
react_devtools_backend.js:6 onerrorLogger: {"stack":"TypeError: Cannot read property 'response' of 
undefined\n at https://localhost/res/ThreeDViewer/ThreeDViewer.js? 
no_cache=1588859265686:40557:26\n at XMLHttpRequest.<anonymous> 
(https://localhost/res/perspective/xhr-length-computable.min.js:3:10)","message":"Cannot read 
property 'response' of undefined","name":"TypeError","logData":{"msg":"Uncaught 
Exception","errorMsg":"Uncaught TypeError: Cannot read property 'response' of 
undefined","url":"https://localhost/res/ThreeDViewer/ThreeDViewer.js? 
no_cache=1588859265686","line number":40557,"column":26}}

```

And then the following error

```
ThreeDViewer.js?no_cache=1588859265686:40557 Uncaught TypeError: Cannot read property 
'response' of undefined
at ThreeDViewer.js?no_cache=1588859265686:40557
at XMLHttpRequest.<anonymous> (xhr-length-computable.min.js:3)

```

When I dig into it, the error is happening at line 35816 in the three.js module, I have been racking my head against this for ages, any ideas?

Thanks for any help,  
Keith G.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [May 7, 2020, 2:03pm UTC](https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998/2 "2020-05-07T14:03:35Z")

</div>

[https://threejsfundementals.org/](https://threejsfundementals.org/) is down at the moment:

> **[Threejsfundementals.org Down or Just Me ?](https://www.isitdownrightnow.com/threejsfundementals.org.html)**
>
> Threejsfundementals down? Check whether Threejsfundementals.org server is down right now or having outage problems for everyone or just for you.

Can you try to load a local glTF file and see if that works?

Note that `.gltf` files usually come with a `.bin` file that needs to be in the same directory.

> [@kgamble](#):
>
> I have tried both Loader and GLTFLoader

`Loader` is not intended to be used directly.

---

<div class="post-metadata">

**Author:** ![kgamble](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kgamble](https://discourse.threejs.org/u/kgamble)\
**Post date:** [May 7, 2020, 2:12pm UTC](https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998/3 "2020-05-07T14:12:23Z")

</div>

Thank you so much for the prompt response!

Just redid it again pointing to a local item, and recieved the exact same errors

```
this.loader.setPath('/res/ThreeDViewer/');
this.loader.load('img/Trapezoid.glb'
      , function ( gltf: any ) { console.log(gltf);
    } , function (xhr: any ) { console.log(xhr); 
    }, function (e: any) { console.log(e);
    }
);

```

I re-exported the glb from blender, and didnt see any other .bin files, I also loaded this directly with [Don McCurdys viewer](https://gltf-viewer.donmccurdy.com/) and it loads fine there

Here is the file, its a pretty simple little shape  
[Trapezoid.glb](https://discourse.threejs.org/uploads/short-url/gCvIv8wsicF7gWbJ4ZZTlUqMtAE.glb) (2.2 KB)

Update: I tried this with a .glb and a .gltf, same result

---

<div class="post-metadata">

**Author:** ![kgamble](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kgamble](https://discourse.threejs.org/u/kgamble)\
**Post date:** [May 7, 2020, 2:39pm UTC](https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998/4 "2020-05-07T14:39:13Z")

</div>

I also reconstructed everything to use the OBJ and MTL loaders, and get the same error

```
let objLoader2: any = new OBJLoader2();
let callbackOnLoad = ( object3d: any ) => {
  this.scene.add( object3d );
  console.log( 'Loading complete for object');
};

let onLoadMtl = ( mtlParseResult: any ) => {
  objLoader2.setModelName('cube');
  objLoader2.setLogging( true, true );
  objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
  objLoader2.load( '/res/ThreeDViewer/img/cube/cube.obj', callbackOnLoad, null, null, null );
};
let mtlLoader: any = MTLLoader();
mtlLoader.load( '/res/ThreeDViewer/img/cube/cube.mtl', onLoadMtl );

```

However this one will not show me the place that it fails in the three.js file, but here is the error

```
TypeError: Cannot read property 'load' of undefined
at Viewer.componentDidMount (ThreeDViewer.js?no_cache=1588862221557:200)
at Pj (react-dom.production.min-16.11.0.js:158)
at unstable_runWithPriority (react.production.min-16.11.0.js:25)
at pb (react-dom.production.min-16.11.0.js:59)
at Ma (react-dom.production.min-16.11.0.js:151)
at We (react-dom.production.min-16.11.0.js:132)
at react-dom.production.min-16.11.0.js:60
at unstable_runWithPriority (react.production.min-16.11.0.js:25)
at pb (react-dom.production.min-16.11.0.js:59)
at Rg (react-dom.production.min-16.11.0.js:60)
```

---

<div class="post-metadata">

**Author:** ![kgamble](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kgamble](https://discourse.threejs.org/u/kgamble)\
**Post date:** [May 7, 2020, 6:36pm UTC](https://discourse.threejs.org/t/any-file-load-attempt-fails-with-uncaught-exception/14998/5 "2020-05-07T18:36:54Z")

</div>

Alright I managed to bandaid the problem, in the three.js source, the Loader.load XMLHttpRequest event listener was not getting a response directly in the function, so I needed to reference the response through request.response instead of this.response. As well later in the script I needed to use request.status instead of this.status.

Here is the code before (notice the references to “this”)

```
	var request = new XMLHttpRequest();

			request.open( 'GET', url, true );

			request.addEventListener( 'load', function ( event ) {

				var response = this.response;

				var callbacks = loading[url];

				delete loading[url];

				if ( this.status=== 200 || this.status=== 0 ) {

					// Some browsers return HTTP Status 0 when using non-http protocol
					// e.g. 'file://' or 'data://'. Handle as success.

					if ( this.status=== 0 ) { console.warn( 'THREE.FileLoader: HTTP Status 0 received.' ); }

					// Add to cache only on HTTP success, so that we do not cache
					// error response bodies as proper responses to requests.
					Cache.add( url, response );

```

Here is the code after my adjustment (Notice the new status variable, and the references to request instead of this):

```
	var request = new XMLHttpRequest();

			request.open( 'GET', url, true );

			request.addEventListener( 'load', function ( event ) {

				var response = request.response;
				
				var callbacks = loading[url];

				delete loading[url];

				var status = request.status;

				if ( status === 200 || status === 0 ) {

					// Some browsers return HTTP Status 0 when using non-http protocol
					// e.g. 'file://' or 'data://'. Handle as success.

					if ( status === 0 ) { console.warn( 'THREE.FileLoader: HTTP Status 0 received.' ); }

					// Add to cache only on HTTP success, so that we do not cache
					// error response bodies as proper responses to requests.
					Cache.add( url, response );

```

I don’t know if this was a bug within my specific environment, or a bug overall, but i thought I would share the solution in case this helps anyone else!