8

Hello I pushed a react/express project up to heroku (https://polar-oasis-57801.herokuapp.com/) and received the following errors in the console: Chrome console error messages

I tried looking up this error and it seems that I need to change something in my manifest.json file but I'm not sure. Any advice would help. Here's my manifest file:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

And also my project on Github: https://github.com/bernar83/cat-cards

Adrian Bernardo
  • 97
  • 1
  • 1
  • 7
  • 2
    Usually such errors mean the JSON parsed is not valid JSON. A quick check of the file you linked seems to suggest it is valid JSON. Is it possible the manifest.json is changed somehow during the deploy process? – Mathyn Mar 15 '19 at 07:28
  • 1
    "Unexpected token `<`" usually means you're trying to parse HTML instead of JSON. Looking at the data returned by the server for https://polar-oasis-57801.herokuapp.com/cat-cards/manifest.json you can see that that's exactly what's happening. The server is returning an HTML document instead of your JSON file. (It's doing the same thing for your `.js` and `.css` files.) – Jordan Running Mar 15 '19 at 17:03
  • I just got the same error and after some hours I fixed it changing the `start_url` in the `manifest.json` to `"start_url": "./index.html",` – ProblemsEverywhere Sep 18 '19 at 15:49

7 Answers7

13

This error means that the request to manifest.json does not return a valid JSON response. Probably it returns an HTML, given the fact that it fails because of a starting <.

Be sure to link the manifest.json correctly and make sure to preserve its integrity in the deployment process. Try to navigate to http://yoururl/manifest.json and check the result.

EDIT1: it seems like your link to the manifest is broken. In https://github.com/bernar83/cat-cards/blob/master/client/public/index.html , try replacing

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

with

<link rel="manifest" href="manifest.json" />

EDIT2: Just checked your Heroku link and can confirm the error. Your page tries to find the manifest.json under the path /cat-cards/manifest.json which is wrong. It should only be manifest.json

gbalduzzi
  • 9,356
  • 28
  • 58
  • 1
    I changed the link to just `manifest.json` and it removed the error message about the manifest file but looking at the console now in my recently deployed heroku site I still get the first two errors in this picture: https://i.stack.imgur.com/ZyMuL.png. Any ideas on how to remove the uncaught syntax error? – Adrian Bernardo Mar 15 '19 at 17:20
  • 1
    you have to fix the links to your javascript files aswell – gbalduzzi Mar 15 '19 at 17:21
  • 1
    I'm not sure if I'm looking in the right place but could you clarify where I can find those javascript links? I'm assuming it's in the `client/build/index.html` file where the manifest link was in but I was not able to find javascript links in it. – Adrian Bernardo Mar 15 '19 at 17:27
  • Actually removing `homepage` from `package.json` fixes it. – Roshdy Oct 16 '19 at 21:05
1

I had the same issue I solve it by:

  1. Go into package.json file in your react app.

  2. You will see the homepage attribute at the top, remove it either copy that URL.

  • If you remove it then again create build and use that build in your express.static('./build').

  • If you copy it then use that url in your app.use("that copied url" , express.static('./build')) in your express server file.

Matt Ke
  • 3,599
  • 12
  • 30
  • 49
khuram00
  • 19
  • 4
0

I added this change "/cat-cards/" in my server.js file so now it's app.use("/cat-cards/", express.static("client/build"));. Adding that change and pushing to Heroku made my website work. This helped me: https://github.com/facebook/create-react-app/issues/1812#issuecomment-286511320

Adrian Bernardo
  • 97
  • 1
  • 1
  • 7
0

I had a similar issue. I'll add it since this is the SO post I ended up at while trying to figure it out. I'd included some generated favicon markup to my "JS not allowed" file. My manifest.json is in my src/ directory, so the pasted in markup was referencing a manifest that wasn't in my public root. The boilerplate code then returned the "JS not allowed here" EJS HTML as the actual return value for the manifest.json, so the browser saw it as malformed JSON... Not ideal.

So, if your router is going to return this sort of thing for bad HTTP requests, like Ant Design Pro does, it could be your problem.

scott-joe
  • 169
  • 1
  • 5
0

yeah I faced this problem and struggled a lot with it then I follow This helped me: https://github.com/facebook/create-react-app/issues/1812#issuecomment-286511320 link. it definitely works. I am thankful to the person who shares this link.

bipanjeet kaur gill
  • 1
  • 2
    Welcome to Stack Overflow! While this link may answer the question, it is better to include some context and the essential parts of the answer here, then provide the link for reference. Link-only answers become invalid when the linked page changes or goes offline. See [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) for some more info. – Mark Ormesher Apr 28 '20 at 05:40
0

Check the index.html inside build and inside your public folder. I had the same issues and just found that issue was with Html nothing else.

Thanks Binod Singh

Binod Singh
  • 682
  • 4
  • 11
  • 22
0

Ran into this issue today. The issue for my team was that in the server.js file, the app.use(routes) line was above the the static assets app.use(express.static("client/build"))

Moving it below allowed the site to deploy to heroku appropriately.

Kyle7286
  • 13
  • 4