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

IT技术 django reactjs google-chrome npm manifest.json
2021-05-18 04:52:25

我有一个通过 npm run build 构建的 React 应用程序。从前端到后端的 GET 和 POST 请求给出状态 200,但我收到一个奇怪的错误,这可能导致我的文件中的所有图像都没有出现在本地主机上。

我已经尝试重新安装节点,添加了 'manifest_version': 2 因为它是 chrome manifest 的当前版本。

单击此处查看屏幕截图

清单:行:1,列:1,语法错误。下面是我的 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>

错误似乎是从我的 index.html 文件的开头开始的。

4个回答

当我将 Codesandbox 项目移动到本地时,我遇到了同样的问题。就我而言,manifest.json文件public夹中没有文件我通过添加生成的默认值manifest.json解决它create-react-app

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

我在运行我的应用程序时遇到了同样的问题(“清单:行:1,列:1,语法错误”)。

通过执行以下操作解决了我的问题:在“重写和重定向”中,确保以下行中有“json”:

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

Target address:
/index.html

Type:
200 (Rewrite)

上述解决方案还解决了生产中不工作的 react-router 链接的问题,因为它在以下线程中报告: React Router DOM 在 Amplify Console AWS 上无法正常工作

这是我的个人项目,有固定的 manifest.json 问题,以及非工作的 react-router 问题(一些随机代码片段的链接 - 在这种情况下是斐波那契记忆):

https://everhint.com/hintlink/algorithms/javascript/codesnippet/fibonacci/memoization/fibonacci-memoization/d01f275b-6acf-4f26-9448-e99939c9d4b7.html

当我向我的仅限开发人员的页面添加密码保护时,我突然开始收到“清单第 1 行第 1 列语法错误”(manifest.json) 错误。

我还使用 AWS Amplify 和 Create React App 来构建我的应用程序。我尝试了上述所有解决方案,但没有任何帮助。

有帮助的一件事是在我的 index.html 中向我的 manifest.json 的链接添加一个属性。

为了解决这个问题,我添加了crossorigin="use-credentials"*,如下所示:

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

VladS 的回答解决了我的问题。我还在我的 Angular 应用程序中使用了 AWS Amplify 控制台。

您还可以查看清单文件响应标头中的 Content-Type。它不应该是text/html如果是,您必须更改服务器配置以在正确的 Content-Type 中提供文件。更多信息

Angular 将清单文件命名为“manifest.webmanifest”。因此,我还必须转到 Amplify 控制台中的“重写和重定向”页面并编辑现有条目,如下所示:

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

(我添加了json|webmanifest