"Manifest: Line: 1, column: 1, Syntax error"

Question

I'm using Vue.js to create a Progressive Web Application (PWA) as a school project. Whenever I host the website with Azure I get "Manifest: Line: 1, column: 1, Syntax error".
I don't have this problem on localhost …

Chrome DevTools responds with :

/manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 GET https://serviceworkerspike.azurewebsites.net/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

How can I correct the error?

I have the following line in my index.html :

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

Here is my manifest.json file :

{
  "name": "MessageBoardUCN",
  "short_name": "MessageBoardUCN",
  "theme_color": "#ff095a",
  "background_color": "#feaaee",
  "display": "standalone",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

What I have tried

Using lower-case letters in the name and short_name properties – messageboarducn.
Setting starturl to the hosted URL or to "/".
Moving the manifest.json file to the root directory or to the src/ directory, but other guides told me it should be in the same folder as index.html, and public/ is the default for that.

This is my file structure.

The hosted URL, https://serviceworkerspike.azurewebsites.net, doesn't work anymore.

Possibly related: [Manifest is not valid JSON. Line: 1, column: 1, Unexpected token](https://stackoverflow.com/q/33758001). — Henke, Aug 29 '23 at 14:35

Francesco · Answer 1 · 2021-03-09T09:39:56.243

If your manifest file is at root level (where your index.html is) you can reference to it like the following in the <head> tag of your index.html file:

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

Plus the startUrl in the manifest file should be:

"start_url": "/"

as you target the root as starting point.

Otherwise if you would serve your app with a specific base url, you should reflect it in the startUrl property:

Example: 

-->  www.myapp.com/my-other-url-part/

Use:
    "start_url": "/my-other-url-part/"

Or simply:
    "start_url": "./"   <-- This would match any base-href != "/"

You should then set your web server to automatically serve the index.html file (this is often enabled per default)

I still get the same mistake but my index.html and manifest isn't in the root, it's in a folder /public as that's how Vue set it up. I linked a photo of my file structure in the question — Glaxer, Nov 27 '19 at 19:28

score 16 · Answer 2 · answered Jul 01 '20 at 13:53

16

For me it was so simple to fix , just a matter of code orgnizing in the index.html , the following link tag has to be on top of the few copied from the favicon generator , just bellow the meta tags

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

answered Jul 01 '20 at 13:53

Djafer Abdelhadi

389
3
6

2

Working with React & create-react-app, that solves the issue! – Adriano Monecchi Jul 31 '20 at 14:58

Neophear · Accepted Answer · 2019-11-28T09:12:13.910

12

I had the exact same problem (on an Azure Windows Web Service). I just created a new web.config in the root folder with the following content (or edit the existing, if there is one):

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

This adds the mime configuration for json-files.

edited Nov 28 '19 at 09:12

answered Nov 28 '19 at 07:48

Neophear

492
6
16

I also facing same error where as I am using node js, bootstrap and tomcat server. I created web.config file same as above but no luck. Is there any other reason ? – kodali Mar 18 '20 at 07:39
@kodali Are you sure that you are running IIS? – Neophear Mar 18 '20 at 09:18
Yes. I am running on IIS server. – kodali Mar 18 '20 at 12:46
@kodali And you get the exact same error? And not on localhost? – Neophear Mar 18 '20 at 13:50
Yes, It is working fine in localhost, but not on IIS Server. – kodali Mar 18 '20 at 13:53
@kodali If you still get a 404 in your browser, it would seem as if your Tomcat-server isn't properly configured. Check out these links: https://www.developershome.com/wap/wapServerSetup/tutorial.asp?page=settingUpMIME https://www.sencha.com/forum/archive/index.php/t-231245.html – Neophear Mar 20 '20 at 06:03
I tried in another server, which is not IIS but tomcat configured properly (means other apps running). But my app shows same error. – kodali Apr 13 '20 at 12:02
same problem. this change in web.config solved it thanks ! – calterras Jun 07 '20 at 22:57

score 6 · Answer 4 · answered Feb 11 '22 at 06:56

6

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />remove this line from the index.html header file or create the manifest.json file inside the public directory

answered Feb 11 '22 at 06:56

Mubarik Neja

61
1
2

score 3 · Answer 5 · answered Feb 03 '22 at 23:14

I understand you are using Azure cloud but I used to have the same issue using AWS Amplify and here are my steps to solve it.

Go to your Amplify console
Select the application that shows the issue.
In the left panel select the option titled Rewrites and redirects.
You will find there the redirection rules of your application. Please select the option Edit.
Find the row with this structure

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>.

Add the extension webmanifest after json. The code would look like

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webmanifest)$)([^.]+$)/>.

Press Save and inspect the site again.

If your project use Apache, then edit the file .htacces and include the webmanifest extension in the section:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|webmanifest)$">
    Header set Access-Control-Allow-Origin "https://your-url"
  </FilesMatch>
</IfModule>

I guess this configuration helps to avoid unwanted and malicious extensions.

This is the right answer if you are using AWS Amplify! Thanks a lot. By the way, you need to add this "Rewrites and redirects" setting in Amplify console. Otherwise, you will get AccessDenied error when refreshing a webpage. — newman, Feb 13 '23 at 22:22

score 1 · Answer 6 · answered Jul 07 '21 at 07:14

I had to have two things configured:

%PUBLIC_URL% in the href of the manifest in index.html:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Configure homepage in package.json to the directory where your app will live:

"homepage": "https://example.com/myapp",

score 0 · Answer 7 · answered Nov 10 '21 at 08:24

Check the manifest file format. When I had UNIX / Unicode UTF-8 no BOM I got this error. After change to DOS / Unicode UTF-8 no BOM the error was gone. The file format can be checked and changed in any advanced code editor. I don't know exactly what was the problem, probably depends on your hosting company. I compared the files in hexa editor and they visually seemed to be the same.

score 0 · Answer 8 · answered Mar 13 '22 at 14:32

I fixed my error by adding json mimetype to the webconfig. The asp.net code was not allowing mimeType json by default to be served.

<system.webServer>
     <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
 </system.webServer>

score 0 · Answer 9 · answered Jul 28 '22 at 04:38

I had same problem and it solved. In my app.js express backend folder I put index.html file by mistake

**(app.use(express.static(path.join(__dirname,"../frontend/build/index.html"))) **

so after removing its working fine. Code should like below

if (process.env.NODE_ENV === 'development') { app.use(express.static(path.join(__dirname,"../frontend/build")));

app.get("*", (req, res) => { res.sendFile(path.resolve(__dirname,"../frontend/build/index.html")); }); }

Kamil Guliyev · Answer 10 · 2022-08-13T19:18:04.583

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more. It is often used by favicon generators for websites.

For some reason, this file site.webmanifest may be blocked by your web server or CDN. I still haven’t figured what it causing this issue though there is a simple workaround. Just rename site.webmanifest to manifest.json and update your link tag.

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

score 0 · Answer 11 · answered Feb 14 '23 at 06:42

I am also facing these same issues when I am working in the Firebase notification service, I accidentally put Manifest.Json File on out of the src folder. please make sure the manifest json file is on src/manifest.json. then the error is gone.

If you work any of the project, this error only come for wrong path of manifest.json file.

score 0 · Answer 12 · answered May 29 '23 at 01:59

In my case I'm using nextjs with the app directory, for me it was just a matter of me putting the manifest file on the wrong place, I had to put it on the public folder insted of the root folder. That solved the issue for me.

project

└───app
│   ...your app...
│   
└───public
    │   manifest.json

And the link should look like this:

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

score 0 · Answer 13 · answered Aug 29 '23 at 14:00

How can I correct the error?

– I cannot reproduce the error as you describe it. But I got this error when I downloaded a Create React App from CodeSandbox – in a setting completely unrelated to Microsoft Azure. ¹

I found two ways to get rid of the error, of which I prefer the first below.

1. Stop using `manifest.json`

In index.html, remove (or comment out) the reference to manifest.json. ²

In my case, the line to remove is :

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

Also, delete the manifest.json file – if there was one to begin with. ³

2. Alternatively, in `manifest.json`, set any property

In my case, I didn't even have a manifest.json file. Creating one, and setting any property in it, silenced the error :

{"any_property": "Any string here"}

Even empty strings solved it. The following manifest.json also silenced the error :

{"": ""}

You haven't provided any means to reproduce the error. This makes it hard to tell why you get it.

This second solution works for me, but not for you. In fact, the exact manifest.json you've provided solves it for me. ⁴

References

^{¹
The error is reproduced in this project.
Just download, unzip, install by running npm install, and then npm start to run the project. Press F12 to see the error.
The error appears only in a Chromium/Blink browser, not in Firefox/Gecko.
²
In the example project, index.html is in the public directory.
³
The manifest.json file is optional for a progressive web app (PWA) if I'm not mistaken.

However, the manifest is mandatory in a Chromium browser if you want to enable the installation of the PWA within its user interface on a mobile or desktop device.
⁴
All I needed to do was to delete the icons property – as I don't have your icons.}

score -1 · Answer 14 · edited Apr 25 '20 at 21:04

-1

Check your base should be like this <base href=""/>

edited Apr 25 '20 at 21:04

β.εηοιτ.βε

33,893
13
69
83

answered Apr 25 '20 at 18:13

Njehuu

59
3

I had to use ./ for my href value like - `` in index.html and set `"index": "/route/from/domain/index.html"` in ngsw-config.json for mine to work. Just same for `"start_url": "./"` – HazeyAce Jul 20 '20 at 16:25

score -2 · Answer 15 · answered Aug 01 '22 at 07:56

-2

You can comment this line in index.html. Thanks me later.

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

Note: manifest.json provides metadata used when your web app is added to the homescreen on Android.

answered Aug 01 '22 at 07:56

Saqib khan

1
2

"Manifest: Line: 1, column: 1, Syntax error"

How can I correct the error?

What I have tried

15 Answers15

How can I correct the error?

1. Stop using manifest.json

2. Alternatively, in manifest.json, set any property

References

1. Stop using `manifest.json`

2. Alternatively, in `manifest.json`, set any property