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": "sindresorhus@gmail.com",
    "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, Mar 22 '18 at 02:16
@JoseJimenez I updated the post with an image of the network — Steven Aguilar, Mar 22 '18 at 02: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, Mar 22 '18 at 13:11
Possible duplicate of ["SyntaxError: Unexpected token < in JSON at position 0" in React App](https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0-in-react-app) — mikdiet, Mar 22 '18 at 21:32

score 2 · Accepted Answer · edited Mar 31 '18 at 05:00

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

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

1 Answers1