reactjsvisual-studiogoogle-chromeasp.net-coremanifest.json

Reputation: 30342

Can't get rid of missing manifest.json error

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?

Upvotes: 38

Answers (14)

Acid Coder

Reputation: 2746

my solution is

replace

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

with

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

Upvotes: 0

Fabo95

Reputation: 1

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.

Upvotes: 0

BoxaBole

Reputation: 89

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

Upvotes: 0

user15134931

Reputation:

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

Upvotes: 1

jjspierx

Reputation: 440

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.

Upvotes: 2

Kirby Howarth

Reputation: 11

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.

Upvotes: 1

Josue Barrios

Reputation: 502

Ok, just do the following:

Simply replaced the call:

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

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

Upvotes: 7

Glen Little

Reputation: 7128

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

Upvotes: 1

gayan ranasinghe

Reputation: 186

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)$

Upvotes: 0

Marc

Reputation: 1987

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.

Upvotes: 3

Nikolay Bronskiy

Reputation: 945

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

Upvotes: 7

jqIndy

Reputation: 444

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

Upvotes: 0

Jon Crowell

Reputation: 22348

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.

Upvotes: 30

Nkosi

Reputation: 247323

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

Upvotes: 50

Can&#39;t get rid of missing manifest.json error

Answers (14)

Related Questions

Can't get rid of missing manifest.json error