Unexpected token < in JSON at position 0

Questions
1

Hi, I am fetching a model(mesh) in my react babylon app from storage and then adding animation to it on button click. I am successfully able to fetch the model as well as its animation file (both in .gltf format). However, I am not able to play the animation since I am getting the following error as soon as my app starts:

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at GLTFFileLoader._parseJson (glTFFileLoader.ts:720)
at glTFFileLoader.ts:537
at XMLHttpRequest.onReadyStateChange (fileTools.ts:396)

I have checked versions for all the dependencies. Here is the link for my github repo:

2

@brianzinn

3

Hi @Megha_Gupta, the < symbol could mean that the parser got fed HTML instead of JSON, which may be because of your fetch code loading a wrong URL:

4

If it’s CRA project- make sure you are serving out of public directory and use as base URL:

process.env.PUBLIC_URL

The dev server will serve files that don’t exist as your index.html file that matches the parse error you are seeing - as Gijs mentioned

5

The request to fetch the model is made on button click (Load model button) but I get this error as soon as my app starts.
Also, the url works fine on babylon js app but shows gltfFileLoader error in react babylon app.
Also, the gltfFileLoader is present in @babylonjs/loaders package. I am using version 4.1.0 for that. Is there any possibility that the parsing issue has something to do with this package or its version?

6

What is in your network trace? What are the contents of the gltf - just want to make sure that it’s not express returning HTML or otherwise if you have a repo