Search code examples
reactjsfirebasesyntax-errorfirebase-hosting

firebase + create-react-app hosting error

i was trying to deploy my react SPA on Firebase, but got only blank page with such console error: "Uncaught SyntaxError: Unexpected token <"

chrome console chrome_elements_blank

to exclude third part libraries I created new React-app to deploy. and got exactly same problem.

terminal log:

part1 part2

part3 part4

anybody knows how to fix this?

link to firebase deployed create-react-app start page

Code from firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [ 
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [ 
      {
        "source" : "*",
        "destination" : "/index.html"
      } 
    ]
  }
}
Solution

  • Your main.js contains the page html data again. <!doctype html><html lang="en"><head>....

    As the browser loads the JS file and tries to interpret it, it fails, as HTML is clearly not javascript. It tries to communicate its confusion with "Oh I found a < but that is not what I expected".

    You seem to have configured a default route for your server and each and any request returns your index.html.

    I noticed in one of your screenshots, that you said "yes" to "Rewrite all urls to index.html" - it does exactly that. You should not activate that, as ALL you requests will then always return the index.html.

    Please have a look in your firebase.json file. You will find the instructions for hosting and routing in there.

    API Docs are here:

    https://firebase.google.com/docs/hosting/full-config

    You might want to have a special look into the redirects array, looking like this:

    "redirects": [ 
  {
    "source" : "*",
    "destination" : "/index.html"
  } 
]

    Here you tell the server to redirect all traffic to /index.html. Delete the redirect entries, redeploy and all will be well.

    So this redirects section will most probably solve the issue:

    {
  "hosting": {
   "public": "build",
   "ignore": [ 
     "firebase.json",
     "**/.*",
     "**/node_modules/**"  
    ],
    "redirects": []
  }
}