“SyntaxError: Unexpected token < in JSON at position 0”

Question

In a React app component which handles Facebook-like content feeds, I am running into an error:

Feed.js:94 undefined \"parsererror\" \"SyntaxError: Un

Answer 1

For future googlers:

This message will be generated if the server-side function crashes.

Or if the server-side function doesn't even exist ( i.e. Typo in function name ).

So - suppose you are using a GET request... and everything looks perfect and you've triple-checked everything...

Check that GET string one more time. Mine was:

'/theRouteIWant&someVar=Some value to send'

should be

'/theRouteIWant?someVar=Some value to send'
               ^

CrAsH !       ( ... invisibly, on the server ...)

Node/Express sends back the incredibly helpful message:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Answer 2

I experienced this error "SyntaxError: Unexpected token m in JSON at position", where the token 'm' can be any other characters.

It turned out that I missed one of the double quotes in the JSON object when I was using RESTconsole for DB test, as {"name: "math"}, the correct one should be {"name": "math"}

It took me a lot effort to figure out this clumsy mistake. I am afraid others would run into similar bummers.

Answer 3

Make sure that response is in JSON format otherwise fires this error.

Answer 4

After spending a lot of time with this, I found out that in my case the problem was having "homepage" defined on my package.json file made my app not work on firebase (same 'token' error). I created my react app using create-react-app, then I used the firebase guide on the READ.me file to deploy to github pages, realized I had to do extra work for the router to work, and switched to firebase. github guide had added the homepage key on package.json and caused the deploy issue.

Answer 5

My problem was that I was getting the data back in a string which was not in a proper JSON format, which I was then trying to parse it. simple example: JSON.parse('{hello there}') will give an error at h. In my case the callback url was returning an unnecessary character before the objects: employee_names([{"name":.... and was getting error at e at 0. My callback URL itself had an issue which when fixed, returned only objects.

Answer 6

In my case, for an Azure hosted Angular 2/4 site, my API call to mySite/api/... was redirecting due to mySite routing issues. So, it was returning the HTML from the redirected page instead of the api JSON. I added an exclusion in a web.config file for the api path.

I was not getting this error when developing locally because the Site and API were on different ports. There is probably a better way to do this ... but it worked.

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
        <match url="(app/.*|css/.*|fonts/.*|assets/.*|images/.*|js/.*|api/.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="None" />
        </rule>

        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
        <match url="(.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="Rewrite" url="index.html" />
        </rule>

        </rules>
        </rewrite>
    </system.webServer>
</configuration>