Firebase deployed react app not working. Uncaught SyntaxError: Unexpected token '<' - firebase

Question

I have my app perfectly running in http://localhost:3000/ when I run my development server with npm start. However, when I npm run build and the firebase deploy the app, the app is not running and is throwing the error: Uncaught SyntaxError: Unexpected token '<'.
Find my firebase.json:
{
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I tried to add this, in case something was catched with no success:
"headers": [
{
"source" : "/sw.js",
"headers" : [
{
"key" : "Cache-Control",
"value" : "no-store"
}
]
}
]
And my package.json:
{
"name": "marioplan",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"firebase": "^8.2.1",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-redux-firebase": "^3.0.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"redux-firestore": "^0.14.0",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts 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"
]
}
}
I read somthing and made trials regarding '"homepage":' needed to be specified in the packaje.jason, as the npm run build throws:
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
Also I tried removing npm --prefix \"$RESOURCE_DIR\" run lint predeploy command as I am not clear about what it does also with no different results.
Just in case anyone might wonder, I do check that the files are actually deployed in the firebase hosting console.

Answer 1

You're not serving any JavaScript, but HTML and that's where the unexpected < comes from. I'd blame this one rewrite rule, which provides "limited" sense, as it will always serve index.html:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]