Can't get rid of missing manifest.json error

reactjs visual-studio google-chrome asp.net-core manifest.json

48,197

Solution 1

Most probably there is a reference to manifest.json somewhere in the project, while the file/resource itself does not exist.

Check to see if you have any link tags with rel=manifest similar to

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

The .webmanifest extension is specified in the Media type registration section of the specification, but browsers generally support manifests with other appropriate extensions like .json.

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

and remove it from the code to stop the error.

Reference Web App Manifest

Solution 2

The manifest.json file is likely where it's supposed to be. The solution is to add an entry in your web.config file under the static content section for .json files.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
</system.webServer>
</configuration>

If you need to add or edit your web.config file, you can do so using the Kudu debug console. (Replace yourapp with your app in the link)

You can also launch the debug console from the portal under Development Tools for your app:

If the manifest.json file is actually missing, you can fix that by following Google's instructions for adding a manifest.json file.

The Web App Manifest is required by Chrome to enable the Add to Home Screen prompt in a web app.

Solution 3

just add crossorigin="use-credentials" so it will look like: <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">

Solution 4

Ok, just do the following:

Simply replaced the call:

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

<link rel="manifest" href="manifest.json" crossorigin="use-credentials">

Solution 5

For those hunting and there is no logical solution, try in a different broswer or incognito mode. I had a persistent error for this file and it was a (junk) plugin for Chrome. I see this a lot in JS via poor packaging or debuggers left on, and other offenses. Pay attention as JS is a very dangerous and difficult language.

View more solutions

48,197

Sam

Updated on July 09, 2022

Comments

Sam almost 2 years

I'm building an ASP.NET Core app with ReactJs front-end in Visual Studio 2017.

Recently, I started to notice the missing manifest.json error in the console -- see below. It doesn't seem to effect my app but I do want to get rid of this error.

If I view my app in Edge, I don't see the missing manifest.json error so this error seems to be contained to Chrome only.

I published the app to Azure and again, in Chrome, I'm getting the same error but not in Edge.

Any idea how I can solve it?
- Cerike over 5 years
  
  You shared 0 details, no one will be able to come up with a magical answer... What is your code?
- Sam over 5 years
  
  What code should I provide? Front-end? Back-end? There's a ton of code and I'm not sure who's responsible for generating the manifest.json file.
- Nkosi over 5 years
  
  @Sam Just throwing this out. Did you do a search in your code to see if anything is making a reference to the filename? My brief research shows that is associated with chrome extensions. developer.chrome.com/extensions/manifest
- Sam over 5 years
  
  @Nkosi Now that you've mentioned it, I ran a full search -- both front-end and back-end -- and I don't see any references to manifest.json. Here's what I do know. My app has a static HTML page used as a landing page even though it's a SPA app and visiting this page doesn't give me the error. If I create a brand new ASP.NET app, I don't get the error either. So, it may be safe to assume that this error is related to the front-end but only affecting Chrome users.
- Nkosi over 5 years
  
  @Sam interesting. To me it was odd that it only happened on chrome, which is what made me look into the chrome extension angle.
- Nkosi over 5 years
  
  @Sam wait...do you have any VS extensions that interact/integrate with chrome? Does this happen while debugging and at run-time? Just trying to help rule out possibilities.
- Sam over 5 years
  
  @Nkosi I don't have any such extensions. Also, I published the app to Azure App Service and I get the missing manifest.json error there too so it's both debug and run time.
- Nkosi over 5 years
  
  @Sam check this out stackoverflow.com/questions/45186993/…
- Nkosi over 5 years
  
  And found one similar to your but no answer (check image) stackoverflow.com/questions/53147286/…
- Nkosi over 5 years
  
  @Sam curious though. In the post you said recently you noticed it (the error). Is it that it was not happening before or that just just became aware of it. I am wondering the file was there but removed some time after
- Nkosi over 5 years
  
  @Sam check to see if you have any link tags with rel=manifest like <link rel="manifest" href="/manifest.webmanifest"> developer.mozilla.org/en-US/docs/Web/Manifest
- Sam over 5 years
  
  Here's what's strange about this. There's a <link rel="manifest" href="/manifest.json"> in the shared view that is used as the entry point. When I look at my repo, I see that it's always been there. According to the documentation you pointed at, manifest.json is primarily used by progressive web apps (PWA). My app is not a PWA, it's an ASP.NET Core API backend and ReactJs front-end so it's a web app. When I remove the reference to manifest.json, the error is gone. As I mentioned, I noticed this issue recently so not sure what happened. I don't have the manifest.json file in the repo.
- Sam over 5 years
  
  @Nkosi Thank you for your help. I've already up-voted your comments but if you post your response as an answer, I'll accept it. Thanks again!
- Nkosi over 5 years
  
  @Sam done. Glad to help. Happy coding.
- CyberAbhay about 5 years
  
  @Sam I am facing the same issue. I can see menifest.json in azure webapp and path to file is correct. menifest.json is located in same dir where index.html is ,still it shows 404 error
- akshay kishore over 4 years
  
  Hi, I have the same issue, only difference I cant seem to find <link rel="manifest" href="/manifest.json"> anywhere in the code, any suggestion which file I should be looking at? @Sam
- Stephane over 4 years
  
  @Jon has the answer below for hosting in Azure
- Art over 2 years
  
  Type localhost:(portno)/manifest.json in the browser's URL, if you don't get the contents of manifest.json displaying it means that the path is not correct. In my case, using Django backend after collectstatic the static files were in a folder called static, so was the manifest file. So the correct path was localhost:(portno)/static/manifest.json, and the manifest.json file was displayed in the browser. I then went to index.html and changed <link rel="manifest" href="/manifest.json"/> to <link rel="manifest" href="static/manifest.json"/> and everything worked correctly.
- Art about 2 years
  
  You could also specify the PUBLIC_URL in .env file and then the react build will build use that path eg: in my case it was hosted at /static/, so in .env file use PUBLIC_URL=/static/
Sam over 5 years

Just accepted your answer. In the next 21 hours, you'll get the 50 bonus points as well. I love it when everyone else gives you generic responses but then someone like you comes along and truly engages with the issue and helps out. Your bonus points are well deserved! Thanks again!
fischgeek over 4 years

This should be the accepted answer. I was held up on this for a while. The file was there, the link tag in the head was there, but it wasn't getting applied. I looked into permissions and that didn't pan out. This, this was the right answer! Thanks!
niico over 4 years

I searched my whole project, no mention of manifest anymore - could be cashed somehow?!
Ivan Paniagua almost 4 years

I was thinking there is no more web.config in ASP.Net Core
J86 over 3 years

This did not work for me. I have my .NET Core app running inside a docker container and nginx sitting in front as a reverse proxy.
TheDiveO about 3 years

Starting with Chrome 88 or so (which doesn't seem to be as lucky a number as it version might suggest in some cultures) crossorigin="use-credentials" becomes necessary when operating the web site behind (enforcing) authenticating reverse proxies: without sending credentials there is simply no chance to ever read the manifest as Chrome never sends any user credentials (to avoid leaking them?) when the reverse proxy needs them as it otherwise 404 or 501.
Jorge Mauricio over 2 years

For anyone that uses some kind of tool that generates some files for favicon, I tried this solution with a slight change and it worked. In my case, I had a file called site.webmanifest. So I changed the configuration to: <mimeMap fileExtension=".webmanifest" mimeType="application/json" />
Joe Wilson about 2 years

This was it for me!
Roobot about 2 years

This is definitely a problem in Azure by default. In my case I wasn't using a manifest file (on purpose), but it still gave this error on the Angular service worker itself (ngsw.json). I added mimeMaps for both .json and .webmanifest (in case we add a manifest later).
Dzenis H. about 2 years

This is the correct solution. Thanks.