将reactjs应用程序部署到aws amplify会导致白屏，并显示错误“未捕获的语法错误：意外的令牌'<'”

Question

将reactjs应用程序部署到aws amplify会导致白屏，并显示错误“未捕获的语法错误：意外的令牌'<'”

API*_*API 5 amazon-web-services reactjs create-react-app aws-amplify

我正在尝试将 ReactJS 应用程序部署到 aws amplify，并且一切都在本地主机和隐身浏览器窗口中最终正常运行，就在我在常规浏览器中访问我的应用程序 url 时，我收到此错误

如果我清除浏览器 cookie 并访问 url，那很好，但每次我部署新的构建文件夹时，它都会返回到此。我尝试了几乎所有可以在互联网上找到的建议，但它仍然发生。

我尝试过的解决方案：

在 .env 文件中设置 PUBLIC_URL。
通过 S3 存储桶进行部署，而不是拖放。
添加<Router basename='/index.html'>到我的代码中。
在 package.json 中添加指向我的域的主页。
添加指向“.”的主页在 package.json 中
在 package.json 中添加指向“./”的主页
将上述主页变体添加到公共文件夹中的manifest.json中。

有关我的环境和观察的详细信息：

我通过 Route 53 使用自定义域在 aws amplify 上托管该应用程序。
应用程序在隐身浏览器上工作得绝对正常，没有任何问题 - 所以如果代码有问题，它也应该在隐身浏览器中中断，正确吗？
解决方法是清除浏览器 cookie 并再次点击 url，但这是不可取的，因为这是生产环境，每次部署更改时，我无法要求用户清除 cookie 并重试 - 浏览器应拾取更改即刻。
以下是我编译的index.html

<html lang="en">

<head>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Vaccination Verification Made Easy" />
    <link rel="apple-touch-icon" href="https://vaxtone.com/logo192.png" />
    <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://js.stripe.com/v3/"></script>
    <link rel="manifest" href="https://vaxtone.com/manifest.json" crossorigin="use-credentials">
    <title>VaxTone</title>
    <link href="https://vaxtone.com/static/css/2.f4136754.chunk.css" rel="stylesheet">
    <link href="https://vaxtone.com/static/css/main.dd527d15.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>"serviceWorker" in navigator && window.addEventListener("load", (function () { navigator.serviceWorker.register("serviceWorker.js").then((function (e) { console.log("ServiceWorker registration successful with scope: ", e.scope) }), (function (e) { console.log("ServiceWorker registration failed: ", e) })) }))</script>
    <script>!function (e) { function t(t) { for (var n, a, i = t[0], c = t[1], l = t[2], s = 0, p = []; s < i.length; s++)a = i[s], Object.prototype.hasOwnProperty.call(o, a) && o[a] && p.push(o[a][0]), o[a] = 0; for (n in c) Object.prototype.hasOwnProperty.call(c, n) && (e[n] = c[n]); for (f && f(t); p.length;)p.shift()(); return u.push.apply(u, l || []), r() } function r() { for (var e, t = 0; t < u.length; t++) { for (var r = u[t], n = !0, i = 1; i < r.length; i++) { var c = r[i]; 0 !== o[c] && (n = !1) } n && (u.splice(t--, 1), e = a(a.s = r[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function a(t) { if (n[t]) return n[t].exports; var r = n[t] = { i: t, l: !1, exports: {} }; return e[t].call(r.exports, r, r.exports, a), r.l = !0, r.exports } a.e = function (e) { var t = [], r = o[e]; if (0 !== r) if (r) t.push(r[2]); else { var n = new Promise((function (t, n) { r = o[e] = [t, n] })); t.push(r[2] = n); var u, i = document.createElement("script"); i.charset = "utf-8", i.timeout = 120, a.nc && i.setAttribute("nonce", a.nc), i.src = function (e) { return a.p + "static/js/" + ({}[e] || e) + "." + { 3: "44b4c37d" }[e] + ".chunk.js" }(e); var c = new Error; u = function (t) { i.onerror = i.onload = null, clearTimeout(l); var r = o[e]; if (0 !== r) { if (r) { var n = t && ("load" === t.type ? "missing" : t.type), u = t && t.target && t.target.src; c.message = "Loading chunk " + e + " failed.\n(" + n + ": " + u + ")", c.name = "ChunkLoadError", c.type = n, c.request = u, r[1](c) } o[e] = void 0 } }; var l = setTimeout((function () { u({ type: "timeout", target: i }) }), 12e4); i.onerror = i.onload = u, document.head.appendChild(i) } return Promise.all(t) }, a.m = e, a.c = n, a.d = function (e, t, r) { a.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (e, t) { if (1 & t && (e = a(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (a.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var n in e) a.d(r, n, function (t) { return e[t] }.bind(null, n)); return r }, a.n = function (e) { var t = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(t, "a", t), t }, a.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, a.p = "https://vaxtone.com/", a.oe = function (e) { throw console.error(e), e }; var i = this["webpackJsonpvaxtone1.0"] = this["webpackJsonpvaxtone1.0"] || [], c = i.push.bind(i); i.push = t, i = i.slice(); for (var l = 0; l < i.length; l++)t(i[l]); var f = c; r() }([])</script>
    <script src="https://vaxtone.com/static/js/2.3e8f6948.chunk.js"></script>
    <script src="https://vaxtone.com/static/js/main.6ccb123a.chunk.js"></script>
</body>
<style>
    body::-webkit-scrollbar {
        display: none
    }

    body {
        -ms-overflow-style: none;
        scrollbar-width: none
    }
</style>

</html>

Run Code Online (Sandbox Code Playgroud)

我使用该create-react-app命令创建reactjs应用程序并用于npm run build生成用于部署的构建文件夹。
我使用 Service Worker 来实现渐进式 Web 应用程序功能 - 这可能与我的 Service Worker 有关吗？

任何有关如何解决此问题或您认为发生了什么的帮助都会有很大的帮助。谢谢。

Answer 1

小智 0

确保您的程序包 json 文件未设置主页或者主页的值与您的 AWS Amplify URL 匹配。我有同样的问题，这解决了它。

归档时间：	4 年，7 月前
查看次数：	1440 次
最近记录：	3 年，8 月前

将reactjs应用程序部署到aws amplify会导致白屏，并显示错误“未捕获的语法错误：意外的令牌'&lt;'”

将reactjs应用程序部署到aws amplify会导致白屏，并显示错误“未捕获的语法错误：意外的令牌'<'”