Manifest.json Unexpected Token

问题

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

回答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

回答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

回答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.

回答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.

回答5:

I had the same issue I solve it by:

Go into package.json file in your react app.
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.

来源：https://stackoverflow.com/questions/55177518/manifest-json-unexpected-token

标签

javascript

node.js

reactjs

express

manifest.json