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

Answer 1

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

Answer 2

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.