Uncaught SyntaxError: Unexpected token '<'

[harrycollin]

I'm not sure if this is something with React itself or the package. I get this in the browser console when trying to load my Unity game
JSON.parse: unexpected character at line 1 column 1 of the JSON data

I've tested the same build outside of React and it loads without an issue.
Any help would be appreciated. My Unity version is 2018.3.1f1

• Apologies if this is obvious. I've only just started to use React in the last few days.

[jeffreylanters]

Hey! No need for apologies, welcome! The error is thrown because your JSON file which is exported by Unity was not found. Your server probably returns a 404 page, which the module tries to parse as JSON. This fails at the first invalid character which is in this case <.

The path you pass when creating the UnityContent object is relative to your HTML. This is because of the way the UnityLoader handles file loading. And besides that you would not want a big file chunk with Unity code inside if your bundle.

this.unityContent = new UnityContent(
  "MyUnityBuild/Build.json", // <------ This path *1
  "MyUnityBuild/UnityLoader.js"
);

So your file tree should look something like:

|- index.html       <----- index.html
|- compiled
|   \- bundle.js
\- MyUnityBuild
    |- UnityLoader.js  
    \- Build.json   <----- path *1 to your build

I hope this clears things up. Good luck! :)

TL;DR Your json file path should be relative to your html file

[harrycollin]

Perfect! It works! I was placing the build inside my src folder... Thank you for your help!

[Syndicist]

The issue I made (referenced directly above) was marked as a duplicate of this one - though, my filesystem was exactly as described as the above, which is why I made a new issue about it. Digging a little deeper, it looks like it makes it this far, but the error is still persisting.

And to be clear about my filesystem organization:


react-docker/frontend is the react project directory.

edit: aaaaaannnnnd found my issue. Build.json is actually MyGame.json. I'm an idiot.

[RazrSlyr]

I am having this same issue and I was wondering if anyone could assist me here. As far as i understand my file structure matches what is being asked but I am still getting the error. This is what I have.

unityContext:

location of build:

The build being in the same folder as the index.html should mean that this should work but I am still getting the error. Any assistance would be greatly appreciated.

[jeffreylanters]

Are you able to view one of the JavaScript files from the browser? @RazrSlyr

[RazrSlyr]

Do you mean through the sources tab in Inspect Element? If so, no. None of the JS files show up in the sources.

[jeffreylanters]

No, I meant if you are able to view the file using the browser in a new tab. To confirm if the file is reachable as a public URL.

[RazrSlyr]

Oh okay that makes more sense. I was able to access the files through the browser in the form of a url.

[RazrSlyr]

Okay I was able to fix the issue. I had to add "workshop/" to the beginning of all my paths for the unityContext.

[studentofcoding]

Hello @jeffreylanters, I've had similar problems with @RazrSlyr, but right now it's still a blank screen 😢

I've set the dir to match what you have @RazrSlyr, but still no luck and this error of Uncaught SyntaxError: Unexpected token '<' (at DEMO_1.loader.js:1:1) keep appearing

And I can't access the file from browser

Much appreciate if you can help with this!