CODEWITHSUNDEEP
javascriptnode.jsreactjsjsonrest
Cameron Sima
Cameron Sima

Reputation: 5385

"SyntaxError: Unexpected token < in JSON at position 0"

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 < 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 (
    <form className="threadForm" onSubmit={this.handleSubmit}>
      <input
        type="text"
        placeholder="Your name"
        value={this.state.author}
        onChange={this.handleAuthorChange} />
      <input
        type="text"
        placeholder="Say something..."
        value={this.state.text}
        onChange={this.handleTextChange} />
      <input
        type="text"
        placeholder="Name your victim"
        value={this.state.victim}
        onChange={this.handleVictimChange} />
      <input
        type="text"
        placeholder="Who can see?"
        value={this.state.included}
        onChange={this.handleIncludedChange} />
      <input type="submit" value="Post" />
    </form>
    )
  }
})

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 (
    <div className="threadsBox">
      <h1>Feed</h1>
      <div>
        <ThreadForm onThreadSubmit={this.handleThreadSubmit} />
      </div>
    </div>
    )
  }
})

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.

Upvotes: 363

Views: 1739872

Answers (30)

MPV
MPV

Reputation: 395

This occurs in Angular when the content type for the request and the response were different in my code. So check headers for

 let headers = new Headers({
        'Content-Type': 'application/json',
        **Accept**: 'application/json'
    });

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)
    });
  },

Upvotes: 1

Tomas Grecio Ramirez
Tomas Grecio Ramirez

Reputation: 380

Make sure that response is in JSON format. Otherwise, you get this error.

Upvotes: 2

Colin
Colin

Reputation: 1836

In my case, the error was a result of me not assigning a 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.

Upvotes: 3

Ozan BAYRAM
Ozan BAYRAM

Reputation: 2901

This error usually occurs when HTML is returned by the endpoint.

So, check the endpoint address that you are making the request. If it's misspelled or if there are some unhandled invalid values in the request, these may be the reason for the endpoint returning HTML response.

Upvotes: 2

cssyphus
cssyphus

Reputation: 40020

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 (non)helpful message:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0.

Per Eliezer Berlin's comment, the < token is usually a piece of unexpected HTML, such as in <head>, being returned by the server.

Upvotes: 6

Dave Skender
Dave Skender

Reputation: 621

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>

2022 UPDATE: having written this several years ago. I'd call this suggestion more of a workaround - a direct fix. The better hosting pattern is to simply not try to host these api paths under your website path; rather, host them on separate base URLs entirely. For my use case example, the API and Web path would be entirely separate Azure Web Services and would get different URL endpoints.

Upvotes: 4

sriram veeraghanta
sriram veeraghanta

Reputation: 409

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

Upvotes: 9

Andrew Shenstone
Andrew Shenstone

Reputation: 281

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 an HTML response is <.

Upvotes: 19

Timea
Timea

Reputation: 31

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(
    <CommentBox data="/api/comments" pollInterval={2000}/>,
    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.

Upvotes: 3

VictorL
VictorL

Reputation: 401

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 will run into similar issues.

Upvotes: 12

Kev
Kev

Reputation: 16321

In my case, I was getting this running webpack. It turned out to be corrupted somewhere in the local node_modules dir.

rm -rf node_modules
npm install

...was enough to get it working right again.

Upvotes: 18

Asim K T
Asim K T

Reputation: 18124

In a nutshell, if you're getting this error or a similar error, that means only one thing: 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 & 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.

This error can be thrown in any place & 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:

  1. curl or hit the actual API you're calling.
  2. Log/Copy the response and try to parse it with JSON.parse. If you're getting error, fix it.
  3. If not, make sure your code is not mutating/changing the original response.

Upvotes: 10

Super Jade
Super Jade

Reputation: 6345

SyntaxError: Unexpected token < in JSON at position 0


You are getting an HTML file (or XML) instead of json.

Html files begin with <!DOCTYPE html>.

I "achieved" this error by forgetting the https:// in my fetch method:

fetch(`/api.github.com/users/${login}`)
    .then(response => 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 => response.text())
    .then(text => 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 => response.json())
    .then(setData)
    .catch(error => (console.log(error)));

Upvotes: 25

Mina
Mina

Reputation: 17009

In most cases, I get this error, when API throws an error with text format. What I suggest is to see the error text content to figure out what is wrong going on.

  1. jQuery => set dataType: 'text'

  2. fetch => reponse.text() instead of reponse.json()

Upvotes: 2

Volomike
Volomike

Reputation: 24886

If you receive this error in a Chrome extension it can be tough to track down, especially if it occurs when you install the extension. However, I found a way that makes it easier.

I had a Chrome extension that called some scripts from my web server on installation of the plugin, pulling down some default settings. I received the error:

SyntaxError: Unexpected token < in JSON at position 0 in _generated_background_page.html

When you get this go into Extensions, find your extension, click the "background page" hyperlink, and the inspector will open for it. Then, go to Network and press CTRL+R. Now, you'll see all the things that the background page had to load.

Click on each one, especially ones that connect back to a remote server. You'll see Headers in the Network tab, followed by a Preview. Look at the Preview for each of the items. If you see something other than the expected header for this data, or you see errors, then that's likely your cause.

In my case, my server script was calling another script and that script had a bug in it because of missing variables at runtime, which then made my application/json header not match with the data it was sending, resulting in the unexpected token error.

Upvotes: 1

solomon njobvu
solomon njobvu

Reputation: 589

In my case, when sending the data in the test API node the JSON object had an extra comma at the end like:

POST   http://localhost:9000/api/posts/ 
Content-Type: application/json

{
    "title": "sokka",
    "description": "hope this works",
    "username": "sokka blog4",
}

so I only needed to remove the extra comma and send this kind of data:

POST   http://localhost:9000/api/posts/ 
Content-Type: application/json

{
    "title": "sokka",
    "description": "hope this works",
    "username": "sokka blog4"
}

I was using the RESTclient extension to test my API.

Upvotes: 1

Narendra Maurya
Narendra Maurya

Reputation: 445

For the React app made by CRA there are two main problems we might face while fetching the JSON data of any <dummy.json> file.

I have my dummy.json file in my project and am trying to fetch the JSON data from that file but I got two errors:

"SyntaxError: Unexpected token < in JSON at position 0 .

I got an HTML file rather than actual JSON Data in the response in the Network tab in Chrome or any browser.

Here are the main two reasons behind that which solved my issue.

  1. Your JSON data is invalid in your JSON file.
  2. It might be that the JSON file did not load properly for this so you just restart your React server. This is my issue, within React.

React direct running or access the public folder not the src folder.

How I solved it:

I moved my file into the public folder and access is directly in any file of the src folder.

My public folder

Making a REST call in the Redux action.js:

export const fetchDummy = ()=>{
return (dispatch)=>{
        dispatch(fetchDummyRequest());
        fetch('./assets/DummyData.json')
        .then(response => {
            if (!response.ok) {
                throw new Error("HTTP error " + response.status);
            }
            return response.json();
        })
        .then(result => {
            dispatch(fetchDummySuccess(result))
        })
        .catch(function (err) {
          dispatch(fetchDummyFailure(err))
        })
    }
}

Upvotes: 2

Anis
Anis

Reputation: 75

If you try to run this line of code in the console:

JSON.parse(undefined);

you will get the same error message:

"SyntaxError: Unexpected token < in JSON at position 0"

Therefore, your app is trying to parse an invalid JSON undefined.

Upvotes: 0

Abhishek D K
Abhishek D K

Reputation: 2427

I was facing the same issue.

I removed the dataType:'json' from the $.ajax method.

Upvotes: 8

Vivek Kalmath
Vivek Kalmath

Reputation: 31

I got the same error while calling an API in React using the fetch API with the POST method.

Before:

fetch('/api/v1/tour',{
      method:"POST",
      headers:{"Content-type":"json/application"},
      body:JSON.stringify(info)
    })
    .then((response)=>response.json())
    .then((json)=>{
      if(json.status === 'success')
        alert(json.message)
      else
        console.log('something went wrong :(')
    }).catch(e=>console.log(e))

I resolved the error by changing the headers to {"Content-type":"application/json"}:

After:

fetch('/api/v1/tour',{
      method:"POST",
      headers:{"Content-type":"application/json"},
      body:JSON.stringify(info)
    })
    .then((response)=>response.json())
    .then((json)=>{
      if(json.status === 'success')
        alert(json.message)
      else
        console.log('something went wrong :(')
    }).catch(e=>console.log(e))

Upvotes: 3

Jeremy Jones
Jeremy Jones

Reputation: 5631

Malformed JSON or HTML instead of JSON is the underlying cause of this issue, as described by the other answers, however in my case I couldn't reliably replicate this error, as if the server was sometimes returning valid JSON, and other times returning something else like an HTML error page or similar.

In order to avoid it breaking the page altogether, I resorted to manually trying to parse the returned content, and share it in case it helps anyone else resolve it for them.

const url = "https://my.server.com/getData";

fetch(url).then(response => {
  if (!response.ok) return; // call failed

  response.text().then(shouldBeJson => { // get the text-only of the response
    let json = null;
    try {
      json = JSON.parse(shouldBeJson); // try to parse that text
    } catch (e) {
      console.warn(e); // json parsing failed
      return;
    };
    if (!json) return; // extra check just to make sure we have something now.

    // do something with my json object
  });
});

While this obviously doesn't resolve the root cause of the issue, it can still help to handle the issue a bit more gracefully and take some kind of reasonable action in instances when it fails.

Upvotes: 2

Vortex
Vortex

Reputation: 80

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

Upvotes: -1

Aniket
Aniket

Reputation: 1122

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

Upvotes: 1

imatwork
imatwork

Reputation: 573

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) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })  
  .catch((error) => {
  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.

Upvotes: -1

Idan
Idan

Reputation: 5450

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: ""

Upvotes: 2

Abak
Abak

Reputation: 41

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.

Upvotes: 1

Sahil Raj Thapa
Sahil Raj Thapa

Reputation: 2473

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 < 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.

Upvotes: 7

R Karwalkar
R Karwalkar

Reputation: 59

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

Upvotes: 0

Ray Macz
Ray Macz

Reputation: 95

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 & 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"

Upvotes: 1

Masoud
Masoud

Reputation: 342

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.

Upvotes: 2

Related Questions