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

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.

Martin Zeitler · Accepted Answer · 2020-12-30 19:20:07Z

2

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"
  }
]

answered Dec 30, 2020 at 19:20

Martin Zeitler

79.6k20 gold badges170 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

rustyBucketBay Over a year ago

I removed that and it works. Many thanks. If you would be so kind to extend a little bit the explanation, I dont understand very well why before it did not work and now it does.

Martin Zeitler Over a year ago

The glob pattern ** matches any location (including requests for *.js) and will rewrite to /index.html. So source is the location being requested and destination will be the outcome. See Glob pattern matching, in case you may require any other rewrite rules.

BEAGLE Over a year ago

@MartinZeitler when I remove this, I get 404 on the files. Any other suggestions?

Chris Sharp Over a year ago

@MartinZeitler I also have the 404 on the other files after removing this. Any help would be appreciated

Ashad Over a year ago

@removing this will not work, as it results in 404

|

Mr T · Accepted Answer · 2024-11-12 21:10:42Z

1

The solution for me was to correct the "homepage": "/" in my package.json. I had been fiddling with it earlier for some github pages preview.

Soo check that as well.

answered Nov 12, 2024 at 21:10

Mr T

911 silver badge4 bronze badges

Comments

Daniel · Accepted Answer · 2024-05-22 19:42:57Z

0

The solution (at least in my case) was to build the project and then deploy it to firebase hosting

npm run build

then

firebase deploy

answered May 22, 2024 at 19:42

Daniel

37.2k10 gold badges123 silver badges208 bronze badges

Comments

fly mountain · Accepted Answer · 2024-07-16 23:41:31Z

0

I solved problem by downgrading firebase-tools from 13.11.4 to 13.11.2.

npm uninstall -g [email protected]

npm install -g [email protected]

answered Jul 16, 2024 at 23:41

fly mountain

72 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related