I’m having trouble deploying my React app. It runs perfectly on my local machine, but when I deploy it on Vercel or other hosting platforms, it just displays a blank white page. I’ve tried some solutions, but nothing seems to work.
GitHub Repository: https://github.com/AviralMehrotra/Retro-Flix
Deployment: https://retro-flix.vercel.app/
Deployment Platforms Tried: Netlify, Vercel, GitHub Pages
Issue: The deployed app only shows a white screen with some errors in the browser console, which I don’t know how to fix. But the app is working without any errors on localhost.
Console log from vercel
https://www.imgbly.com/ib/JdK6k85pU8
Package.json
{
"homepage": "https://aviralmehrotra.github.io/retro-flix/",
"name": "popcorn",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^6.0.0"
}
}
What I’ve Tried:
*Deploying directly from the GitHub repository.
* Deploying from the build folder.
* Checked the logs, but no specific errors were reported.
* Tested on different browsers, but the issue remains.