简体   繁体   English

清单:行:1,列:1,Chrome 浏览器上的语法错误

[英]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文件的开头开始的。

i put the manifest.json on the public file with the index.html我将 manifest.json 放在带有 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.

相关问题 Django表单错误:表main_manifest没有名为manifest_name的列 - Django Form Error: table main_manifest has no column named manifest_name 当Django提供manifest.json时,Chrome提示“未检测到清单” - Chrome says 'No manifest detected' when manifest.json is served by Django 将 pdf 作为附件发送会导致 Chrome 浏览器出现未定义错误 - Sending pdf as attachment causes undefined error in Chrome browser 为什么我的django网址文件中的这一行给我一个语法错误? - Why is this line in my url file for django giving me a syntax error? django.db.utils.ProgrammingError:“第6行”或附近的语法错误: - django.db.utils.ProgrammingError: syntax error at or near “WITH ORDINALITY” LINE 6: Django错误:语法无效( <unknown> ,第1行)在迭代queryset时 - Django error: invalid syntax (<unknown>, line 1) when iterating queryset JSONDecodeError:预期值:第1行第1列(字符0)错误 - JSONDecodeError: Expecting value: line 1 column 1 (char 0) error mod_wsgi-mod_wsgi-表达错误AH00526:第16行的语法错误 - mod_wsgi - mod_wsgi-express error AH00526: Syntax error on line 16 在新窗口浏览器中打开Ajax Response(pdf)。 chrome中的Firefox bur错误还可以(Django + Javascript) - Opening Ajax Response(pdf) in new window browser. Ok with Firefox bur error in chrome (Django+Javascript) { "detail": "JSON 解析错误 - 期望值:第 1 行第 1 列(字符 0)" } - { "detail": "JSON parse error - Expecting value: line 1 column 1 (char 0)" }
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM