Can't get rid of missing manifest.json error

Question

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?

Answer 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.

ie

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

and remove it from the code to stop the error.

Reference Web App Manifest

Answer 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.

Answer 3

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

Answer 4

Ok, just do the following:

Simply replaced the call:

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

by

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

Answer 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.

Answer 6

In my case, using React with asp.net core and identity, I started getting this error when setting my entire app to require authentication via Startup.cs.

services.AddAuthorization(options =>
        {
            options.FallbackPolicy = new AuthorizationPolicyBuilder()
                .RequireAuthenticatedUser()
                .Build();
        });

This was causing the manifest syntax error, because my Index.html was referencing the manifest.json like so:

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

My app did not have sufficient permissions to access the file after requiring authentication for all pages.

TLDR; Even if your referenced manifest files exists, ensure you are authorized to access it from your app.

Answer 7

IIS can also restrict files by extension. Check to make sure .json is not listed there!

Answer 8

I had the same issue with an error in Lighthouse looking for the file 'asset-manifest.json'. The quick option was to create an empty file with that name, which will get rid of the error.