SyntaxError: Unexpected token < in JSON at position 0 - React app in Rails API

Question

I'm working on a Rails 5.0.6 as an API. I am also running a React application for the front end running on a node server version v9.8.0. On the React app which is running on localhost:3000 I get the following error:

The rails is used as an API so in the controllers I return @drinks in json format.

drinks_controller.rb

class DrinksController < ApiController
  # GET /drinks
  def index
    @drinks = Drink.select("id,title").all

    render json: @drinks.to_json
  end

  # GET /drinks/1
  def show
    @drink = Drink.find(params[:id])
    render json: @drink.to_json(:include => { :ingredients => { :only => [:id, :description] }})
  end
end

I run both servers locally using Procfile in Profile.dev

web: cd client && PORT=3000 npm start
api: PORT=3001 && bundle exec rails s

When I go to the rails server which is running on localhost:3001/api/drinks I get the following:

[{"id":1,"title":"Sparkling Negroni"},{"id":2,"title":"Pineapple-Jalapeño Margarita"}]

which is in json format, On the app.js im fetching from that endpoint

class App extends Component {
  componentDidMount() {
    window.fetch('api/drinks')
      .then(response => response.json())
      .then(json => console.log(json))
      .catch(error => console.log(error))
  }

Is it the proxy not working?

{
  "name": "package-json",
  "version": "4.0.1",
  "description": "Get metadata of a package from the npm registry",
  "license": "MIT",
  "repository": "sindresorhus/package-json",
  "proxy": "http://localhost:3001",
  "author": {
    "name": "Sindre Sorhus",
    "email": "[email protected]",
    "url": "sindresorhus.com"
  }

I can't understand what the issue is?

I see that you are using the developer toolbar, what is going on in your network panel? What response is returned by your server? — Jose Jimenez
– Jose Jimenez, Commented Mar 22, 2018 at 2:16
@JoseJimenez I updated the post with an image of the network — Steven Aguilar
– Steven Aguilar, Commented Mar 22, 2018 at 2:24
@StevenAguilar you can click on your /api/drinks line in the network panel and look for a "response" or "preview" tab in the resulting screen. It should show you what is coming back from your rails applicaiton. — Jose Jimenez
– Jose Jimenez, Commented Mar 22, 2018 at 13:11
Possible duplicate of "SyntaxError: Unexpected token < in JSON at position 0" in React App — mikdiet
– mikdiet, Commented Mar 22, 2018 at 21:32

bob · Accepted Answer · 2018-03-31 05:00:16Z

2

I suspect your rails app is returning html when fetch is expecting JSON... The < character is indicative that an HTML string is being delivered, (the JSON parser is choking on HTML).

Try dumping the response "as is" to see what you're receiving.

class App extends Component {
  componentDidMount() {
    window.fetch('api/drinks')
      .then(response => {
         console.log(response.status);
         console.log(response.body);
         return response.json();
      })
      .then(json => console.log(json))
      .catch(error => console.log(error))
}

edited Mar 31, 2018 at 5:00

bob

8,0232 gold badges50 silver badges44 bronze badges

answered Mar 22, 2018 at 2:51

Kirk B

713 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SyntaxError: Unexpected token < in JSON at position 0 - React app in Rails API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related