Manifest.json Unexpected Token

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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.