Манифест: строка: 1, столбец: 1, синтаксическая ошибка в браузере Chrome
У меня есть приложение реагирования, которое построено с помощью npm run build. Запрос GET и POST от внешнего интерфейса к внутреннему дает статус 200, но я получаю странную ошибку, которая может привести к тому, что все изображения из моих файлов не появятся на локальном хосте.
Я уже пытался переустановить узел, добавил 'manifest_version': 2, поскольку это текущая версия Chrome манифеста.
Нажмите здесь для просмотра скриншота
Манифест: строка: 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.
11 ответов
У меня была такая же проблема, когда я переместил свой проект 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 манифеста" (manifest.json).
Я также использую AWS Amplify и Create React App для создания своего приложения. Я попробовал все вышеперечисленные решения, но ничего не помогло.
Единственное, что действительно помогло, - это добавление одного свойства к ссылке на мой manifest.json в моем index.html.
Чтобы решить эту проблему, я добавил crossorigin="use-credentials"*, как показано ниже:
<link crossorigin="use-credentials" rel="manifest" href="./manifest.json" />
У меня была такая же проблема ("Манифест: Строка: 1, столбец: 1, Синтаксическая ошибка") при запуске моего приложения (реагирующее приложение с помощью response-router, опубликованное с помощью AWS Amplify).
Моя проблема была решена следующим образом: Убедитесь, что в строке "Перезапись и перенаправление" указано "json" в следующей строке:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
Вышеупомянутое решение также устранило проблему с неработающими связями реактивного маршрутизатора в производственной среде, о чем сообщалось в следующем потоке: React Router DOM не работает правильно на Amplify Console AWS
Вот мой личный проект с исправленной проблемой manifest.json, а также неработающей проблемой реактивного маршрутизатора (ссылка на некоторый случайный фрагмент кода - мемоизация Фибоначчи в данном случае):
Реагировать создать приложение
Если вы получили эту ошибку при работе с приложением React Create, вам следует перейти по адресу:public/index.html найти<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />и удалите его.
Ответ VladS решил мою проблему. Я также использовал консоль AWS Amplify для своего приложения Angular.
Вы также можете посмотреть 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)
ты должен положить
"homepage": "",
на вашем packaje.json. у меня это сработало.
в строке 7 index.html просто удалите это
<link rel="manifest" href="/manifest.json">
ошибка исходит из этой строки, потому что вы удаляете manifest.json, но вы забываете эту строку, поэтому у вас есть ошибка в вашей консоли
На самом деле я просто хотел добавить комментарий к сообщению mtw, но моя репутация не позволяет этого. Я также смог исправить это, добавив json|webmanifest к обработчикам в файле app.yaml (приложение Angular 9 на платформе хостинга Google Cloud) вот так...
handlers:
- url: /(.*\.(gif|png|jpg|css|js|svg|json|webmanifest)(|\.map))$
secure: always
redirect_http_response_code: 301
static_files: dist/\1
upload: dist/(.*)(|\.map)
Это сообщение об ошибке, по-видимому, является общей ошибкой для многих проблем. Для меня проблема заключалась в использовании http-сервера для загрузки страницы. Когда я переключился на корневой каталог проекта и запустил
npm start, проект загрузился без проблем и каких-либо изменений.
Я удалил эту строку из моего файла index.html в общедоступном каталоге.
<link rel="manifest" href="/manifest.json">