Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"
      } 
    ]
  }
}
like image 375
mmstarz Avatar asked Aug 15 '18 11:08

mmstarz


People also ask

Can I host React app on Firebase hosting?

Choose hosting: Configure files for Firebase hosting and (optionally) set up GitHub Action deploys. Use an existing project: Select the Firebase project you created earlier ( react-app-firebase ). Enter build as the public directory. Configure as a single-page app: Yes .

Can I host a React app?

Your React App may be hosted in three easy steps. Render comes with a free SSL certificate, a global CDN, a custom domain, and auto-deployment with Git integration. Render offers a free static site hosting plan as well as competitive pricing for other services.


3 Answers

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": []
  }
}
like image 133
Kai Mattern Avatar answered Oct 01 '22 12:10

Kai Mattern


This also can be an issue in the package.json file, if you have set the attribute homepage

   {
    "name": "project-name",
    "homepage": "https://project-url",
    "version": "0.1.0",
   }

to solve this issue remove the homepage attribute.

like image 22
Lucas Matos Avatar answered Oct 01 '22 11:10

Lucas Matos


thanks everyone for quick reply. problem was solved with adding "redirects":[] to firebase.json like this:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [],        
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
like image 36
mmstarz Avatar answered Oct 01 '22 12:10

mmstarz