[英]Manifest: Line: 1, column: 1, Syntax error on Chrome browser
I have a react app that built through npm run build.我有一个通过 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.
从前端到后端的 GET 和 POST 请求给出状态 200,但我收到一个奇怪的错误,可能导致我文件中的所有图像都没有出现在 localhost 上。
I have already tried to reinstall node, added 'manifest_version': 2 as it is the current version of chrome manifest.我已经尝试重新安装节点,添加了 'manifest_version': 2 因为它是当前版本的 chrome manifest。
Click here for inspect screenshot单击此处查看屏幕截图
Manifest: Line: 1, column: 1, Syntax error.清单:行:1,列:1,语法错误。 Below is my index.html file
下面是我的 index.html 文件
<!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.似乎错误从我的 index.html 文件的开头开始。
I had the same problem when I moved my Codesandbox project to local.当我将我的 Codesandbox 项目移动到本地时,我遇到了同样的问题。 In my case, there was no
manifest.json
file in the public
folder.就我而言,
public
中没有manifest.json
文件。 I solved it by adding the default manifest.json
that create-react-app
generates:我通过添加
create-react-app
生成的默认manifest.json
解决了这个问题:
{
"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"
}
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).运行我的应用程序(使用 react-router 反应应用程序,使用 AWS Amplify 发布)时,我遇到了同样的问题(“清单:行:1,列:1,语法错误”)。
My problem was fixed by doing the following: In "Rewrites and redirects" make sure you have "json" in the following line:通过执行以下操作解决了我的问题:在“重写和重定向”中,确保您在以下行中有“json”:
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上述解决方案还解决了生产中非工作 react-router 链接的问题,因为它在以下线程中报告: React Router DOM not working correct 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):这是我的个人项目,有固定的 manifest.json 问题,以及非工作的 react-router 问题(一些随机代码片段的链接 - 在这种情况下是斐波那契记忆):
https://everhint.com/hintlink/algorithms/javascript/codesnippet/fibonacci/memoization/fibonacci-memoization/d01f275b-6acf-4f26-9448-e99939c9d4b7.html https://everhint.com/hintlink/algorithms/javascript/codesnippet/fibonacci/memoization/fibonacci-memoization/d01f275b-6acf-4f26-9448-e99939c9d4b7.html
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.当我向我的开发人员专用页面添加密码保护时,我突然开始收到“清单第 1 列第 1 列语法错误”(manifest.json)错误。
I am also using AWS Amplify as well as Create React App to build my app.我还使用 AWS Amplify 和 Create React 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.有帮助的一件事是在 index.html 中的 manifest.json 链接中添加一个属性。
To solve this, I added crossorigin="use-credentials"
*, like below:为了解决这个问题,我添加了
crossorigin="use-credentials"
*,如下所示:
<link crossorigin="use-credentials" rel="manifest" href="./manifest.json" />
VladS answer solved my problem. VladS 的回答解决了我的问题。 I was also using AWS Amplify Console for my Angular App.
我还在为我的 Angular 应用程序使用 AWS Amplify 控制台。
You can also have a look at the Content-Type in the response headers of your manifest file.您还可以查看清单文件响应标头中的 Content-Type。 It should NOT be
text/html
.它不应该是
text/html
。 If it is, you have to change your server configuration to serve the file in the right Content-Type.如果是,您必须更改服务器配置以使用正确的 Content-Type 提供文件。 More info
更多信息
Angular names the Manifest-File "manifest.webmanifest". Angular 将清单文件命名为“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:
因此,我还必须转到 Amplify 控制台中的“重写和重定向”页面并编辑现有条目,如下所示:
Source address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|webmanifest)$)([^.]+$)/>
(I added json|webmanifest ) (我添加了json|webmanifest )
you should put你应该把
"homepage": "",
on your packaje.json .在你的packaje.json上。 it worked for me.
它对我有用。
I have a react app that built through npm run build.我有一个通过npm run build构建的react应用程序。 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.
从前端到后端的GET和POST请求给出状态200,但是我收到一个奇怪的错误,该错误可能导致我文件中的所有图像都没有出现在本地主机上。
I have already tried to reinstall node, added 'manifest_version': 2 as it is the current version of chrome manifest.我已经尝试重新安装节点,并添加了“ manifest_version”:2,因为它是chrome清单的当前版本。
Click here for inspect screenshot点击此处查看截图
Manifest: Line: 1, column: 1, Syntax error.清单:第1行,第1列,语法错误。 Below is my index.html file
以下是我的index.html文件
<!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.看来错误是从我的index.html文件的开头开始的。
This error message seems to be a catchall error for a lot of issues.此错误消息似乎是许多问题的包罗万象的错误。 For me the issue was using http-server to load the page.
对我来说,问题是使用 http-server 加载页面。 When I switched to the project root directory and ran
npm start
, the project loaded without issues and any changes.当我切换到项目根目录并运行
npm start
,项目加载没有问题和任何更改。
in line 7 of index.html just delete this在 index.html 的第 7 行中删除它
<link rel="manifest" href="/manifest.json">
the error is coming from this line cause you delete manifest.json but you forget this line so you have an error in your console错误来自此行,因为您删除 manifest.json 但您忘记了此行,因此您的控制台中有错误
React create app反应创建应用程序
If you got this error while working with React Create App you should go to: public/index.html find <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
and remove it.如果您在使用 React Create App 时遇到此错误,您应该转到: public/index.html找到
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
并将其删除。
我从公共目录中的 index.html 文件中删除了这一行
<link rel="manifest" href="/manifest.json">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.