Uncaught (in promise) SyntaxError when console.logging data from my server file

35 Views Asked by At

I'm running a test to have my React client (built with vite) and Flask server speak to each other (linux, ubuntu VM) - I'm pretty sure I set up my proxy correctly but I'm running into this error message when hitting npm run dev to start my build:

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

Here is my code:

Package.json

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "proxy": "http://127.0.0.1:5000",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

Client app.jsx (which is then loaded via main.jsx):

import React, {useState, useEffect} from 'react'

function App() {

  const [data, setData] = useState([{}])

  useEffect(() => {
    fetch("/members").then(
      res => res.json()
    ).then(
      data => {
        setData(data)
        console.log(data)
      }
    )
  }, [])
  
  return (
    <div>App</div>
  )
}

export default App

Server server.py:

from flask import Flask 

app = Flask(__name__)

@app.route("/members")
def members():
    return {"members": ["Member1", "Member2", "Member3"]}

if __name__ == "__main__":
    app.run(debug=True)

Server is running on localhost:5000 (127.0.0.1:5000), 100% sure.

Have tried shifting the proxy between localhost:5000 and 127.0.0.1:5000, and both of these don't seem to make a difference and lead to that same error message.

I've also tried adjusting the fetch request to hit the members path directly (so either hitting http://127.0.0.1:500/members, or http://localhost:5000/members), and am initially hit with an error telling me to set my request mode to 'no-cors', followed by a new error signature:

App.jsx:10 Uncaught (in promise) SyntaxError: Unexpected end of input (at App.jsx:10:18)
    at App.jsx:10:18

When I set the mode to 'no-cors', I'm still hit with the above error message even though the CORS policy one disappears.

Not entirely sure how to proceed from here...

0

There are 0 best solutions below