How to fix “Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0” ERROR

Question

After hours of searching the web I have not found the solution to my problem. So I am building a full-stack CRUD app on React & Java Spring Boot. So far I have been able to run the backend soring boot on localhost://8080. The problem appears when I run the frontend React on localhost://3000 -> The React App keeps loading & I see “Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0” the error in the console.

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
state = {
isLoading: true,
groups: []
};

async componentDidMount() {
const response = await fetch('/api/groups');
const body = await response.json();
this.setState({ groups: body, isLoading: false });
} ->

get syntax error here

render() {
const {groups, isLoading} = this.state;

if (isLoading) {
  return <p>Loading...</p>;
}

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <div className="App-intro">
        <h2>JUG List</h2>
        {groups.map(group =>
          <div key={group.id}>
            {group.name}
          </div>
        )}
      </div>
    </header>
  </div>
);
}
}

export default App;

package.json:

{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bootstrap": "4.1.3",
"react": "^16.14.0",
"react-cookie": "3.0.4",
"react-dom": "^16.14.0",
"react-router-dom": "4.3.1",
"react-scripts": "3.4.3",
"reactstrap": "6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"proxy": "http://localhost:8080" //====>PROBLEMATIC CODE(should be outside 
 //the script block)
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
 ]
}

response.json:

{
"$id": "response.json#",
"$schema": "http://json-schema.org/draft-06/schema#",
"type": "object",
"required": [
"status",
"statusText",
"httpVersion",
"cookies",
"headers",
"content",
"redirectURL",
"headersSize",
"bodySize"
],
"properties": {
"status": {
  "type": "integer"
},
"statusText": {
  "type": "string"
},
"httpVersion": {
  "type": "string"
},
"cookies": {
  "type": "array",
  "items": {
    "$ref": "cookie.json#"
  }
},
"headers": {
  "type": "array",
  "items": {
    "$ref": "header.json#"
  }
},
"content": {
  "$ref": "content.json#"
},
"redirectURL": {
  "type": "string"
},
"headersSize": {
  "type": "integer"
},
"bodySize": {
  "type": "integer"
},
"comment": {
  "type": "string"
}
}
}

SOLUTION:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
 "proxy": "http://localhost:8080"

GitHub Repo

redab · Answer 1 · 2020-10-14T23:16:27.803

7

What is the response returned by the /api/groups call? Based on the error message, it is likely that the response is in HTML format. But it is being parsed as JSON (in the response.json()) call.

Try to temporarily change your code to the following:

const body = await response.text();
console.log(body);

Or use the network tab to inspect the server's response.

edited Oct 14 '20 at 23:16

answered Oct 14 '20 at 23:03

redab

1,551
1
10
9

I posted the group.java class as requested. Server returns syntax error as indicated above in the App.json file... – Alex Mo Oct 14 '20 at 23:34
It looks like what you have posted is the json schema (describes the structure of the json). Could you post the contents of what the server actually returned in response to the /api/groups call? You could get this by inspecting the request in dev tools network tab, or using a log statement like i showed above. – redab Oct 15 '20 at 02:00
I would try making a /api/groups call separately in a browser window and confirm that it is working first. – redab Oct 15 '20 at 04:02

score 3 · Accepted Answer · answered Oct 15 '20 at 20:52

"proxy": "http://localhost:8080"

Above line should be outside the Scripts block below. Because "proxy" is not a part of scripts, but rather a port that talks to the react server see details Like SO:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"

How to fix “Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0” ERROR

2 Answers2