This question has been asked many times, I've checked all the usual causes of this - and still can't resolve the issue. See the debug steps below for the usual causes & attempted solutions.
I have a React app (built from create-react-app), a Node Express server, and I deploy them on Heroku.
The entire repo is public here.
You can view the live production page here.
Here is the problem:
The React app loads fine. On app load, we make an API call to "GET /api/haikus" which returns an error. (view App.js code)
The API call's error says Unexpected token < in JSON. We inspect the network response, and see our React app's index.html page.
I also used PostMan to directly do a GET /api/haikus to see if my browser or react was messing with it. I still get the same response (ie the index.html page).
For Express apps, this usually means your routes are in the wrong order (e.g. app.get("*", ...) is getting hit before your API routes).
So I checked the routes in my server.js file. They're in the right order with the /api routes above the general * route.
So why is my server not matching any routes only in production?