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  Unexpected token  lt  in JSON at position 0    I ran into a similar error which turned out to be a typo in the HTML within the render function  but that doesn t seem to be the case here    More confusingly  I rolled the code back to an earlier  known-working version and I m still getting the error    Feed js   import React from  react    var ThreadForm   React createClass     getInitialState  function          return  author                   text                   included                  victim                          handleAuthorChange  function  e        this setState  author  e target value          handleTextChange  function  e        this setState  text  e target value          handleIncludedChange  function  e        this setState  included  e target value          handleVictimChange  function  e        this setState  victim  e target value          handleSubmit  function  e        e preventDefault       var author   this state author trim       var text   this state text trim       var included   this state included trim       var victim   this state victim trim       if   text     author     included     victim          return           this props onThreadSubmit  author  author                                   text  text                                   included  included                                  victim  victim                                      this setState  author                         text                         included                        victim                                 render  function          return        lt form className  threadForm  onSubmit  this handleSubmit  gt         lt input         type  text          placeholder  Your name          value  this state author          onChange  this handleAuthorChange    gt         lt input         type  text          placeholder  Say something             value  this state text          onChange  this handleTextChange    gt         lt input         type  text          placeholder  Name your victim          value  this state victim          onChange  this handleVictimChange    gt         lt input         type  text          placeholder  Who can see           value  this state included          onChange  this handleIncludedChange    gt         lt input type  submit  value  Post    gt       lt  form gt                var ThreadsBox   React createClass     loadThreadsFromServer  function            ajax         url  this props url        dataType   json         cache  false        success  function  data            this setState  data  data           bind this         error  function  xhr  status  err            console error this props url  status  err toString            bind this                handleThreadSubmit  function  thread        var threads   this state data     var newThreads   threads concat  thread       this setState  data  newThreads         ajax         url  this props url        dataType   json         type   POST         data  thread        success  function  data            this setState  data  data           bind this         error  function  xhr  status  err            this setState  data  threads           console error this props url  status  err toString            bind this                getInitialState  function          return  data             componentDidMount  function          this loadThreadsFromServer       setInterval this loadThreadsFromServer  this props pollInterval         render  function          return        lt div className  threadsBox  gt         lt h1 gt Feed lt  h1 gt         lt div gt           lt ThreadForm onThreadSubmit  this handleThreadSubmit    gt         lt  div gt       lt  div gt                module exports   ThreadsBox   In Chrome developer tools  the error seems to be coming from this function    loadThreadsFromServer  function loadThreadsFromServer           ajax         url  this props url        dataType   json         cache  false        success  function  data            this setState   data  data             bind this         error  function  xhr  status  err            console error this props url  status  err toString             bind this                 with the line console error this props url  status  err toString   underlined   Since it looks like the error seems to have something to do with pulling JSON data from the server  I tried starting from a blank db  but the error persists  The error seems to be called in an infinite loop presumably as React continuously tries to connect to the server and eventually crashes the browser   EDIT    I ve checked the server response with Chrome dev tools and Chrome REST client  and the data appears to be proper JSON   EDIT 2   It appears that though the intended API endpoint is indeed returning the correct JSON data and format  React is polling http   localhost 3000    1463499798727 instead of the expected http   localhost 3001 api threads   I am running a webpack hot-reload server on port 3000 with the express app running on port 3001 to return the backend data  What s frustrating here is that this was working correctly the last time I worked on it and can t find what I could have possibly changed to break it

User · Answer

just something basic to check  make sure you dont have anything commented out in the json file    comments here will not be parsed and throw error

User · Answer

Protip  Testing json on a local Node js server  Make sure you don t already have something routing to that path     url app assets stuff etc

User · Answer

Maybe some permission error would be there just try switching the browser and log in from an authorized account

User · Answer

If anyone else is using fetch from the  Using Fetch  documentation on Web API s in Mozilla   This is really useful  https   developer mozilla org en-US docs Web API Fetch API Using Fetch       fetch api url     database         method   POST      or  PUT      headers          Content-Type    application json             body  qrdata   notice that it is not qr but qrdata         then  response    gt  response json       then  data    gt        console log  Success    data             catch  error    gt      console error  Error    error          This was inside the function    async function postQRData qr       let qrdata   qr    this was added to fix it      then fetch was here     I was passing into my function qr what I believed to be an object because qr looked like this    name    Jade    lname    Bet    pet   cat   but I kept getting syntax errors   When I assigned it to something else  let qrdata   qr  it worked

User · Answer

Those who are using create-react-app and trying to fetch local json files   As in create-react-app  webpack-dev-server is used to handle the request and for every request it serves the index html  So you are getting      SyntaxError  Unexpected token  lt  in JSON at position 0    To solve this  you need to eject the app and modify the webpack-dev-server configuration file    You can follow the steps from here

User · Answer

In my case  backend   I was using res send token    Everything got fixed when I changed to res send data    You may want to check this if everything is working and posting as intended  but the error keeps popping up in your front-end

User · Answer

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

User · Answer

For some  this may help you guys  I had a similar experience with Wordpress REST API  I even used Postman to check if I had the correct routes or endpoint  I later found out that I accidentally put an  echo  inside my script - hooks   Debug  amp  check your console  Cause of the error   So basically  this means that I printed a value that isn t JSON that is mixed with the script that causes AJAX error -  SyntaxError  Unexpected token r in JSON at position 0

User · Answer

You re receiving HTML  or XML  back from the server  but the dataType  json is telling jQuery to parse as JSON  Check the  Network  tab in Chrome dev tools to see contents of the server s response

User · Answer

On a general level this error occurs when a JSON object is parsed that has syntax errors in it  Think of something like this  where the message property contains unescaped double quotes          data               code    1            message    This message has  unescaped  quotes  which is a JSON syntax error              If you have JSON in your app somewhere then it s good to run it through JSONLint to verify that it doesn t have a syntax error  Usually this isn t the case though in my experience  it s usually JSON returned from an API that s the culprit   When an XHR request is made to an HTTP API that returns a response with a Content-Type application json  charset UTF-8 header which contains invalid JSON in the response body you ll see this error   If a server-side API controller is improperly handling a syntax error  and it s being printed out as part of the response  that will break the structure of JSON returned  A good example of this would be an API response containing a PHP Warning or Notice in the response body    lt b gt Notice lt  b gt    Undefined variable  something in  lt b gt  path to some-api-controller php lt  b gt  on line  lt b gt 99 lt  b gt  lt br   gt         success   false       data                 95  of the time this is the source of the issue for me  and though it s somewhat addressed here in the other responses I didn t feel it was clearly described  Hopefully this helps  if you re looking for a handy way to track down which API response contains a JSON syntax error I ve written an Angular module for that   Here s the module          Track Incomplete XHR Requests        Extend httpInterceptor to track XHR completions and keep a queue     of our HTTP requests in order to find if any are incomplete or     never finish  usually this is the source  of the issue if it s     XHR related     angular module   xhrErrorTracking              ng            ngResource               factory   xhrErrorTracking       q   function   q             var currentResponse   false           return               response  function  response                     currentResponse   response                  return response     q when  response                               responseError  function  rejection                     var requestDesc   currentResponse config method         currentResponse config url                  if   currentResponse config params   requestDesc          JSON stringify  currentResponse config params                     console warn   JSON Errors Found in XHR Response      requestDesc  currentResponse                     return  q reject  rejection                                            config      httpProvider   function   httpProvider              httpProvider interceptors push   xhrErrorTracking                  More details can be found in the blog article referenced above  I haven t posted everything found there here as it s probably not all relevant

User · Answer

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

User · Answer

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

User · Answer

This might cause due to your javascript code is looking at some json response and you received something else like text

User · Answer

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

User · Answer

In python you can use json Dump str  before send result to html template  with this command string convert to correct json format and send to html template  After send this result to JSON parse result    this is correct response and you can use this

User · Answer

In my case  I was getting this running webpack  and it turned out to be some corruption somewhere in the local node modules dir   rm -rf node modules npm install      was enough to get it working right again

User · Answer

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    lt  xml version  1 0  encoding  UTF-8   gt    lt configuration gt       lt system webServer gt           lt rewrite gt           lt rules gt           lt clear   gt            lt  -- ignore static files -- gt           lt rule name  AngularJS Conditions  stopProcessing  true  gt           lt match url   app    css    fonts    assets    images    js    api        gt           lt conditions logicalGrouping  MatchAll  trackAllCaptures  false    gt           lt action type  None    gt           lt  rule gt            lt  --remaining all other url s point to index html file -- gt           lt rule name  AngularJS Wildcard  enabled  true  gt           lt match url          gt           lt conditions logicalGrouping  MatchAll  trackAllCaptures  false    gt           lt action type  Rewrite  url  index html    gt           lt  rule gt            lt  rules gt           lt  rewrite gt       lt  system webServer gt   lt  configuration gt

User · Answer

Unexpected token  lt  in JSON at position 0    A simple solution to this error is to write a comment in styles less file

User · Answer

For me  this happened when one of the properties on the object I was returning as JSON threw an exception   public Dictionary lt string  int gt  Clients   get  set    public int CRCount       get               var count   0            throws when Clients is null         foreach  var c in Clients                count    c Value                    return count            Adding a null check  fixed it for me   public Dictionary lt string  int gt  Clients   get  set    public int CRCount       get               var count   0          if  Clients    null                foreach  var c in Clients                    count    c Value                                  return count

User · Answer

The possibilities for this error are overwhelming    In my case  I found that the issue was adding the homepage filed in package json caused the issue   Worth checking  in package json change   homepage   www example com    to  hompage

User · Answer

In my case it turned out that the endpoint URL from which I was fetching data has changed - and I was not aware of that  When I corrected the URL  I started to get the proper JSON

User · Answer

SyntaxError  Unexpected token  lt  in JSON at position 0   You are getting an html file instead of json  Html files begin with  lt  DOCTYPE html gt   I  quot achieved quot  this error by forgetting the https    in my fetch method  fetch   api github com users   login         then response   gt  response json         then setData    I verified my hunch  I logged the response as text instead of JSON  fetch   api github com users   login         then response   gt  response text         then text   gt  console log text        then setData    Yep  an html file  Solution  I fixed the error by adding back the https    in my fetch method  fetch  https   api github com users   login         then response   gt  response json         then setData       catch error   gt   console log error

User · Answer

The wording of the error message corresponds to what you get from Google Chrome when you run JSON parse   lt        I know you said the server is setting Content-Type application json  but I am led to believe the response body is actually HTML   Feed js 94 undefined  quot parsererror quot   quot SyntaxError  Unexpected token  lt  in JSON at position 0 quot  with the line console error this props url  status  err toString    underlined   The err was actually thrown within jQuery  and passed to you as a variable err  The reason that line is underlined is simply because that is where you are logging it  I would suggest that you add to your logging  Looking at the actual xhr  XMLHttpRequest  properties to learn more about the response  Try adding console warn xhr responseText  and you will most likely see the HTML that is being received

User · Answer

In my Case there was problem with  quot Bearer quot  in header ideally it should be  quot Bearer  quot  space after the end character  but in my case it was  quot Bearer quot  there was no space after the character  Hope it helps some one

User · Answer

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 amp 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  lt  in JSON at position 0

User · Answer

In a nutshell  if you re getting this error or similar error  that means only one thing  That is  in someplace in our codebase we were expecting a valid JSON format to process and we didn t get one  For example   var string    some string   JSON parse string    Will throw an error  saying      Uncaught SyntaxError  Unexpected token s in JSON at position 0   Because  the first character in string is s  amp  it s not a valid JSON now  This can throw error in between also  like   var invalidJSON     foo     bar    missedquotehere    value      JSON parse invalidJSON    Will throw error    VM598 1 Uncaught SyntaxError  Unexpected token v in JSON at position 36   because we intentionally missed a quote in the JSON string invalidJSON at position 36    And if you fix that   var validJSON     foo     bar    missedquotehere    value      JSON parse validJSON    will give you an object in JSON   Now  this error can be thrown in any place  amp  in any framework library  Most of the time you may be reading a network response which is not valid JSON  So steps of debugging this issue can be like    curl or hit the actual API you re calling  Log Copy the response and try to parse it with JSON parse  If you re getting error  fix it  If not  make sure your code is not mutating changing the original response

User · Answer

Just to add to the answers  it also happens when your API response includes    lt  php username   Some     which could be a case when your backend is using PHP

User · Answer

This might be old  But  it just occurred in angular  the content type for request and response were different in my code  So  check headers for     let headers   new Headers            Content-Type    application json             Accept     application json            in React axios  axios     method  get     url  http         headers              Content-Type    application json           Accept   application json           responseType  json       jQuery Ajax      ajax         url  this props url        dataType   json     headers                Content-Type    application json           Accept   application json                 cache  false        success  function  data            this setState   data  data             bind this         error  function  xhr  status  err            console error this props url  status  err toString             bind this

User · Answer

I my case the error was a result of me not assigning my return value to a variable  The following caused the error message    return new JavaScriptSerializer   Serialize  hello      I changed it to   string H    hello   return new JavaScriptSerializer   Serialize H     Without the variable JSON is unable to properly format the data

User · Answer

This error occurs when you define the response as application json and you are getting a HTML as a response  Basically  this happened when you are writing server side script for specific url with a response of JSON but the error format is in HTML

User · Answer

I had the same error message following a tutorial  Our issue seems to be  url  this props url  in the ajax call  In React DOM when you are creating your element  mine looks like this   ReactDOM render       lt CommentBox data   api comments  pollInterval  2000   gt       document getElementById  content        Well  this CommentBox does not have a url in its props  just data  When I switched url  this props url -  url  this props data  it made the right call to the server and I got back the expected data    I hope it helps

User · Answer

This ended up being a permissions problem for me  I was trying to access a url I didn t have authorization for with cancan  so the url was switched to users sign in  the redirected url responds to html  not json  The first character in a html response is  lt

User · Answer

i was facing the same issue i removed the dataType  json  from the   ajax method

[javascript] "SyntaxError: Unexpected token < in JSON at position 0"

Examples related to javascript

Examples related to json

Examples related to reactjs