Manifest: Line: 1, column: 1, Syntax error on Chrome browser
Solution 1
I had the same problem when I moved my Codesandbox project to local. In my case, there was no manifest.json
file in the public
folder.
I solved it by adding the default manifest.json
that create-react-app
generates:
{
"short_name": "CloseWeUI",
"name": "The front-end UI for CloseWe",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Solution 2
I had the same problem ("Manifest: Line: 1, column: 1, Syntax error") while running my app (react app with react-router, published with AWS Amplify).
My problem was fixed by doing the following: In "Rewrites and redirects" make sure you have "json" in the following line:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
The above solution also fixed problem with non-working react-router links in production as it was reported in the following thread: React Router DOM not working correctly on Amplify Console AWS
Here is to my personal project with fixed manifest.json issue, as well as non-working react-router issue (a link to some random code snippet - fibonacci memoization in this case):
Solution 3
As I added password protection to a developer-only page of mine, I suddenly started getting "manifest line 1 column 1 syntax error" (manifest.json) errors.
I am also using AWS Amplify as well as Create React App to build my app. I tried all of the solutions above, but nothing helped.
The one thing that did help was adding one property to the link to my manifest.json in my index.html.
To solve this, I added crossorigin="use-credentials"
*, like below:
<link crossorigin="use-credentials" rel="manifest" href="./manifest.json" />
Solution 4
VladS answer solved my problem. I was also using AWS Amplify Console for my Angular App.
You can also have a look at the Content-Type in the response headers of your manifest file. It should NOT be text/html
. If it is, you have to change your server configuration to serve the file in the right Content-Type. More info
Angular names the Manifest-File "manifest.webmanifest". So I also had to go to the "Rewrites and redirects" Page in the Amplify Console and edited the existing entry like so:
Source address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|webmanifest)$)([^.]+$)/>
(I added json|webmanifest)
Solution 5
you should put
"homepage": "",
on your packaje.json. it worked for me.
Kyle Ma
Updated on July 05, 2022Comments
-
Kyle Ma almost 2 years
I have a react app that built through npm run build. GET and POST request from the front-end to back-end gives status 200 but I am getting a weird error that may cause all the images from my files not appear on localhost.
I have already tried to reinstall node, added 'manifest_version': 2 as it is the current version of chrome manifest.
Click here for inspect screenshot
Manifest: Line: 1, column: 1, Syntax error. Below is my index.html file
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="/manifest.json"> <link rel="shortcut icon" href="/favicon.ico"> <title>Django React Boilerplate</title> <link href="/static/css/2.87ad9c80.chunk.css" rel="stylesheet"> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script> ! function(l) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++) t = n[f], p[t] && i.push(p[t][0]), p[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]); for (s && s(e); i.length;) i.shift()(); return c.push.apply(c, u || []), a() } function a() { for (var e, r = 0; r < c.length; r++) { for (var t = c[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== p[u] && (n = !1) } n && (c.splice(r--, 1), e = f(f.s = t[0])) } return e } var t = {}, p = { 1: 0 }, c = []; function f(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports } f.m = l, f.c = t, f.d = function(e, r, t) { f.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, f.r = function(e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, f.t = function(r, e) { if (1 & e && (r = f(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (f.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) f.d(t, n, function(e) { return r[e] }.bind(null, n)); return t }, f.n = function(e) { var r = e && e.__esModule ? function() { return e.default } : function() { return e }; return f.d(r, "a", r), r }, f.o = function(e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, f.p = "/"; var r = window.webpackJsonp = window.webpackJsonp || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++) e(r[o]); var s = n; a() }([]) </script> <script src="/static/js/2.e5ee7667.chunk.js"></script> <script src="/static/js/main.9f678b97.chunk.js"></script> </body> </html>
It appeared that the error starts from the beginning of my index.html file.
-
Kyle Ma over 4 yearsThanks, I think that was my problem. I didn't push my public folder onto Heroku.
-
Sebastian Oscar Lopez over 3 yearsIt works for me, just add this line to the beginning of index.html
-
tim over 2 yearsSuperb, works. Is there a security concern with adding
crossorigin="use-credentials"
?