I have an app built by Vite (Express&React), it runs well locally but has an API call issue when I deployed it on Vercel.

This is the piece of code I am trying to fetch data from back end API:

Locally it works well and returns the expected array of objects

The Vervcel Production version throw an error and the API call return a HTML document

I am thinking if it is caused by the way I configure the connection of MongoDB and Vercel.

This is my Github repo link:

https://github.com/CoderKaiHan/milestone-project-2
(Issues: src/client/components/Inspirations.jsx && ViewMyEscapes.jsx)

This is my deployed link:

https://milestone-project-2-35gyvgk6u-coderkaihans-projects.vercel.app/
(Issues happen on Browse Escape and View My Escape pages)

Thank you!

I tried to make an API call to the back end server to get data from MongoDB. Which I expect to return an array of objects. In local environment, it works as I expected. However, when I deployed in on Vercel, the API call returns HTML in the format of string.

I tried different ways to configure the MongoDB connection string on Vercel. None of them works. In the end I stick with add an Environment variable named MONGODB_URI and set it a value of my MongoDB Atlas connection string. Still not work.

When I interact with the Atlas database through local app, the data in the Atlas does reflect properly which means my connection string has no problem.

I would be very appreciated if you can help me with this problem. I am trying to do more work on this project to make it better and put it in my resume.