Javascript react应用程序中出现语法错误。仅在第一次加载时
我搞不清楚到底是什么问题 每当我部署react应用程序的新版本时，都会出现以下错误：Javascript react应用程序中出现语法错误。仅在第一次加载时,javascript,html,css,reactjs,netlify,Javascript,Html,Css,Reactjs,Netlify,我搞不清楚到底是什么问题 每当我部署react应用程序的新版本时，都会出现以下错误： SyntaxError:expected expression，get'您的HTML文件不完全有效，这可能导致此问题 脚本标记应该在head或body标记内，而不是在两者之间 将链接标记放在标题标记内 从链接标记的末尾删除/ 发布的代码和不正确的异步/延迟使用还有几个问题。你可以通过一个验证器来运行你的页面，比如我认为问题在于缓存+一些不存在的脚本文件 1） 如果本地脚本文件丢失，它可能会将其作为常规Rea
SyntaxError:expected expression，get'您的HTML文件不完全有效，这可能导致此问题
- 脚本标记应该在head或body标记内，而不是在两者之间
- 将链接标记放在标题标记内
- 从链接标记的末尾删除/
发布的代码和不正确的异步/延迟使用还有几个问题。你可以通过一个验证器来运行你的页面，比如我认为问题在于缓存+一些不存在的脚本文件
1） 如果本地脚本文件丢失，它可能会将其作为常规React应用程序请求处理，并返回以
开头的内容，为什么会在尝试将响应解析为JS时得到SyntaxError
2） 此外，我认为它与缓存应用程序的某些部分有关。可能在部署时您删除了旧文件，但应用程序仍在使用一些以前的hash:main.XXXXX.js查找旧文件。但是在部署过程中，您完全删除了这些文件并上载了新脚本：main.yyyyy.js
检查开发人员工具，确保所有脚本都返回预期的JS文件响应，如果其中任何脚本丢失，请对缓存头和/或部署脚本进行适当更改。我没有通读您发布的全部代码，但是；如果硬刷新，是否总是会出现错误？（CTRL+F5）否，执行硬重新加载或空缓存和硬重新加载不会导致再次弹出错误。一个隐姓埋名的人也不知道它的价值。有趣的是。。。如果它没有发生在隐姓埋名中（这是我假设的第一次加载场景），您能更具体地定义“第一次加载”的含义吗？你如何确保这是复制的？我同意你的观点，这就是为什么我如此困惑的原因。我已经设置了netlify，以便在我提交github回购上的主banch时发布构建。我所说的“首次加载”是指netlify建立并发布新分支后，任何人第一次访问该网站。该错误是否仅在部署到netlify后的第一次页面加载时发生？它是在本地发生的吗？很酷的工具！我修复了错误和警告。还更新了我的原始帖子，添加了新的index.html文件。不幸的是，它没有解决这个问题。太糟糕了！这意味着问题可能出在您的javascript/css中。它看起来像是一个缓存错误！谢谢你为我指引了正确的方向。对于问题的编辑部分，我认为你有多种选择，首先需要弄清楚你想要实现什么。您是否需要服务人员，需要缓存哪些内容，不需要缓存哪些内容。通过阅读或搜索他们的类似问题，您可能会更好地了解这些问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="/color.less" >
<meta name="theme-color" content="#ffffff">
<title>Kirs</title>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/w1ycmr5d';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=omitted&libraries=places"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
# Global settings applied to the whole site.
# “base” is directory to change to before starting build, and
# “publish” is the directory to publish (relative to root of your repo).
# “command” is your build command.
[build]
base = ""
publish = "build"
command = "REACT_APP_STAGE=dev npm run build"
# Production context: All deploys to the main
# repository branch will inherit these settings.
[context.production]
command = "REACT_APP_STAGE=prod npm run build"
# Deploy Preview context: All Deploy Previews
# will inherit these settings.
[context.deploy-preview]
command = "REACT_APP_STAGE=dev npm run build"
# Branch Deploy context: All deploys that are not in
# an active Deploy Preview will inherit these settings.
[context.branch-deploy]
command = "REACT_APP_STAGE=dev npm run build"
# Always redirect any request to our index.html
# and return the status code 200.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200