Cannot load .gltf from public folder

Hi guys!

I am applying my babylon on previously published React project, but it’s getting this error message.

VM1505:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at e._parseJson (glTFFileLoader.js:875)
at glTFFileLoader.js:521
at XMLHttpRequest.i (fileTools.js:435)

I have included my .gltf model related files in the public folder and it works fine when I run it on local server, but it’s getting this error message on published project.

I get there’s something wrong with the path, but how can I fix it??

I don’t get how this works on local server, but not work on the published project :frowning:

I am using assetManager for loading.

this.assetLoader = new AssetsManager(this.scene);

loadProductModel(name, src, fileName) {
    const meshTask = this.assetLoader.addMeshTask(`${name}Task`, "", src, fileName);
    meshTask.onSuccess = function (task) {
      task.loadedMeshes[0].position = new Vector3(0, -10, 0);


This is usually happening why you didn’t include the gltf loader package in your project. Can you make sure that the loaders plugin is included in your project (with the same version as the core package)

1 Like

I downloaded these below

npm i @babylonjs/loaders
npm install @babylonjs/core

and included using

// tried both
import "@babylonjs/loaders/glTF";
import "@babylonjs/loaders";

and these all work on the local server.

and both are the same versions: 4.2

hmm I was thinking maybe that the rootUrl that it is directing are different on localserver and the one on the published one? :frowning:

Then you should check the URL, yes. It appears that your server is sending an HTML page (probably a 404) instead of the JSON/glTF file.

would then the .gltf file appear as 404 on the devtool? because the status code is 200

check the content type and the actual return value of the URL loaded. if it starts with a < it is probably an HTML.

OMG!! You’re right! The content type appears to be model/gltf+json on local and text/html on the website.

Do you know how I can fix this problem??

By URL loaded, you mean the request URL? It does not have < in it.

Well, it’s your server :slight_smile: Can’t really help there.
You should check that the URL is correct and that the file is there, and that the server knows that a gltf should return the correct file type.


WOW!! Thank you so much!!

Even your last comment helped me a lot! I uploaded the model related files on the server and loaded from there and it’s now all working!

1 Like

hi, I want to know babylon can read file by relative path ? only support URL? Thank you.

It is loading url from xhr/fetch apis so it follows all web standards regarding it