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?

You shared 0 details, no one will be able to come up with a magical answer... What is your code? — Cerike, Dec 03 '18 at 23:05
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. — Sam, Dec 03 '18 at 23:07
@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. https://developer.chrome.com/extensions/manifest — Nkosi, Dec 03 '18 at 23:37
@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. — Sam, Dec 03 '18 at 23:45
@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, Dec 03 '18 at 23:48
@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. — Nkosi, Dec 03 '18 at 23:50
@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. — Sam, Dec 03 '18 at 23:52
@Sam check this out https://stackoverflow.com/questions/45186993/what-is-public-manifest-json-file-in-create-react-app — Nkosi, Dec 03 '18 at 23:54
And found one similar to your but no answer (check image) https://stackoverflow.com/questions/53147286/create-react-app-is-deployed-but-github-pages-shows-404-from-manifest-json — Nkosi, Dec 03 '18 at 23:55
@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, Dec 04 '18 at 00:01
@Sam check to see if you have any `link` tags with `rel=manifest` like `` https://developer.mozilla.org/en-US/docs/Web/Manifest — Nkosi, Dec 04 '18 at 00:03
Here's what's strange about this. There's a `` 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, Dec 04 '18 at 01:06
@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! — Sam, Dec 04 '18 at 01:08
@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 — CyberAbhay, Apr 25 '19 at 04:50
Hi, I have the same issue, only difference I cant seem to find anywhere in the code, any suggestion which file I should be looking at? @Sam — akshay kishore, Aug 09 '19 at 07:14
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 `` to `` and everything worked correctly. — Art, Jan 22 '22 at 16:49
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/` — Art, Feb 08 '22 at 14:00

score 46 · Accepted Answer · answered Dec 04 '18 at 01:17

46

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

answered Dec 04 '18 at 01:17

Nkosi

235,767
35
427
472

4

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! – Sam Dec 04 '18 at 01:24
I searched my whole project, no mention of manifest anymore - could be cashed somehow?! – niico Jan 23 '20 at 17:31

Jon Crowell · Answer 2 · 2019-05-11T16:04:16.127

28

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.

edited May 11 '19 at 16:04

answered May 11 '19 at 14:15

Jon Crowell

21,695
14
89
110

5

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! – fischgeek Nov 23 '19 at 18:41
I was thinking there is no more web.config in ASP.Net Core – Ivan Paniagua Jun 25 '20 at 16:01
1

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: – Jorge Mauricio Nov 02 '21 at 06:58
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). – Roobot Mar 18 '22 at 02:56

score 5 · Answer 3 · answered Oct 21 '19 at 14:08

5

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

answered Oct 21 '19 at 14:08

Nikolay Bronskiy

843
11
19

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. – J86 Sep 27 '20 at 10:10
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. – TheDiveO Mar 22 '21 at 08:46
How do you do that from webpack? – LJD Sep 09 '22 at 07:00

score 4 · Answer 4 · answered Jun 25 '20 at 14:10

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">

answered Jun 25 '20 at 14:10

Josue Barrios

440
5
10

This is the correct solution. Thanks. – Dženis H. Mar 30 '22 at 04:42
How do you do that from webpack? – LJD Sep 09 '22 at 06:59

score 3 · Answer 5 · answered Jan 03 '20 at 01:46

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.

score 2 · Answer 6 · answered Jan 15 '21 at 18:15

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.

score 1 · Answer 7 · answered Apr 04 '20 at 19:41

1

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

answered Apr 04 '20 at 19:41

Glen Little

6,951
4
46
68

1

This was it for me! – Joe Wilson Feb 16 '22 at 22:08

score 1 · Answer 8 · answered Oct 09 '20 at 20:17

1

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.

answered Oct 09 '20 at 20:17

Kirby Howarth

11
1

score 1 · Answer 9 · answered Mar 10 '21 at 17:19

1

in your main index.html there would be a code like this:

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

replace it with this:

<link rel=“manifest” href="/src/manifest.json">

answered Mar 10 '21 at 17:19

score 0 · Answer 10 · answered Sep 28 '19 at 07:27

In react you might find manifest.json in your public folder and a link to this file in index.html.

manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

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

score 0 · Answer 11 · edited Mar 26 '20 at 17:42

0

As the same error happened after uploading the React client in my case to Google app engine, while manifest JSON was present, updating app.yaml saved the situation:

  - url: /(.*\.(js|css|png|jpg|svg|json|ico|txt))$
    secure: always
    static_files: build/\1
    upload: build/.*\.(js|css|png|jpg|svg|json|ico|txt)$

edited Mar 26 '20 at 17:42

Kate Orlova

3,225
5
11
35

answered Mar 26 '20 at 13:57

gayan ranasinghe

106
1
5

score 0 · Answer 12 · edited Feb 25 '22 at 06:19

0

Had the same problem, in my case the problem was not so big, the last information(background_color": "#ffffff) had a , at the end, which caused a problem... like this:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
}

edited Feb 25 '22 at 06:19

Peter Csala

17,736
16
35
75

answered Feb 24 '22 at 22:24

BoxaBole

51
3

score 0 · Answer 13 · answered Jul 25 '22 at 16:22

0

I got this error by implementing my react app in a sub directory of my server.

If anybody gets the same error in this use case you can find a solution here:

https://create-react-app.dev/docs/deployment/#building-for-relative-paths

In general you habe to adjust your package.json with "homepage" as a property an the path of the directory aus a value.

answered Jul 25 '22 at 16:22

Fabo95

1
1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 27 '22 at 10:04

Can't get rid of missing manifest.json error

13 Answers13

Linked