I have built a Full-stack MERN (React + Node.js + MongoDB) Note taking application. After ensuring both frontend and backend apps were working properly on my local machine, I decided to deploy them on Render.
I first deployed the backend to Render, and when I tried to connect my local frontend app with the deployed backend app, it worked great. I could perform actions like Sign up/Log in without any issues.
Then I deployed my frontend app on Render as well (here’s the web app - https://notes-app-xjr0.onrender.com). When I clicked on the above URL, it landed on the Application home page without any issue. Now here comes the interesting part.
When I tried to log in to my account (user account was already present in MongoDB), I get the error - SyntaxError: Unexpected end of JSON input. I’m getting the same error when trying to sign up with the app (Screenshot - https://i.stack.imgur.com/cVh4A.png)
This is very puzzling, as the app was working fine when I tried to connect my local frontend app with the deployed backend app. To check if the API is misbehaving in any way, I tried to call the APIs from Postman as well - and received the correct responses each time for all API endpoints.
The screenshot shows the error coming from react_devtools_backend.js which feels like the issue is related to the React Developer Tools Chrome extension and not directly to your app. Which would explain why you only see that issue there.
Whenever I log in/sign up, the Backend is supposed to store the session, and hence a cookie should be stored in the Frontend to keep the user logged in. Immediately after that, the app makes a GET call to the notes API (/api/notes) to fetch the notes associated with the user credentials stored in the cookie. But in my case, after successfully logging in (POST call to /api/users/login) I cannot see the cookie anymore, and hence the notes API is failing with a 401 - User not authenticated error.
