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

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

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