Sign Up

Have an account? Sign In Now

Sign In

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.

Forgot Password?

Need An Account, Sign Up Here

You must login to add post.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Passionable Logo Passionable Logo
Sign InSign Up

Passionable

Passionable Navigation

  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Feed
  • User Profile
  • Communities
  • Questions
  • Polls
  • Tags
  • Badges
  • Buy Points
  • Users
  • Help
  • New Questions
  • Trending Questions
  • Must read Questions
  • Hot Questions
Home/ Questions/Q 6842
In Process
Alek Richter
  • 0
Alek RichterEnlightened
Asked: December 22, 20212021-12-22T02:37:23+00:00 2021-12-22T02:37:23+00:00

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

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

  • 1 1 Answer
  • 3 Views
  • 0 Followers
  • 0
    • Report
  • Share
    Share
    • Share on Facebook
    • Share on Twitter
    • Share on LinkedIn
    • Share on WhatsApp

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Alek Richter Enlightened
    2021-12-22T02:38:13+00:00Added an answer on December 22, 2021 at 2:38 am

    The wording of the error message corresponds to what you get from Google Chrome when you run JSON.parse('<...'). 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 "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"

    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.

    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report
Leave an answer

Leave an answer
Cancel reply

Browse

Sidebar

Ask A Question

Stats

  • Questions 4k
  • Answers 4k
  • Best Answers 0
  • Users 3
  • Popular
  • Answers
  • Alek Richter

    Dialog throwing "Unable to add window — token null is ...

    • 2 Answers
  • Alek Richter

    How to deal with SettingWithCopyWarning in Pandas

    • 2 Answers
  • Alek Richter

    Is the Glamour College Bard's Mantle of Inspiration Overpowered?

    • 2 Answers
  • Alek Richter
    Alek Richter added an answer Pandas DataFrame columns are Pandas Series when you pull them… January 13, 2022 at 2:21 pm
  • Alek Richter
    Alek Richter added an answer The handshake failure could have occurred due to various reasons:… January 13, 2022 at 2:19 pm
  • Alek Richter
    Alek Richter added an answer Mac OS X doesn't have apt-get. There is a package… January 13, 2022 at 2:18 pm

Top Members

Alek Richter

Alek Richter

  • 4k Questions
  • 1k Points
Enlightened
coinbaseprosupportnumber[Xsdwerfgtyujhnbgfderewqasdxz]

coinbaseprosupportnumber[Xsdwerfgtyujhnbgfderewqasdxz]

  • 2 Questions
  • 2 Points

Trending Tags

questin question

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • New Questions
  • Trending Questions
  • Must read Questions
  • Hot Questions

© 2021 Passionable. All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.