我很难弄清楚到底是什么问题。
每当我部署新版本的react应用程序时，我都会收到以下错误：
SyntaxError: expected expression, got '<'
然而，问题的有趣之处在于，它只发生在第一次加载时。如果你在浏览器上按下刷新键，问题就会消失，直到推出新版本后才会再次发生。
根据我可以从其他堆栈溢出帖子中收集的内容：
构建和部署SyntaxError后React firebase错误：应为表达式，得到'<#39；
问题似乎出在index.html文件中，我正在加载一个js脚本，但html正在被加载，并且'<'角色抛出错误。此外，我在开发时从未见过这种错误，只在构建和部署过一次。
由于错误只发生在第一次加载时，所以我一直在挠头。
这是我的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">
<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>
我使用netlify来部署我的应用程序，如果这有什么不同的话。
netlify.toml:
# 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
谢谢你的帮助！
我认为问题是缓存+一些不存在的脚本文件。
1( 如果本地脚本文件丢失，它可能会将其作为常规React应用程序请求进行处理，并返回以<!DOCTYPE html>开头的内容，这就是为什么在它试图将响应解析为JS时会得到SyntaxError。
2( 此外，我认为这与缓存应用程序的某些部分有关。在部署时，您可能会删除旧文件，但应用程序仍在寻找以前带有hash:main的旧文件。XXXXX.js。但在部署过程中，您完全删除了这些文件，并上传了新的脚本：main。YYYYY.js.
检查开发人员工具，确保所有脚本都返回预期的JS文件响应，如果其中任何一个丢失，请对缓存头和/或部署脚本进行适当的更改。
您的HTML文件不完全有效，这可能会导致此问题。
-
脚本标记应该在head或body标记内，而不是在两者之间。
-
将链接标签放置在head标签中。
-
删除链接标记末尾的/。
发布的代码还有几个问题，异步/延迟使用不当。您可以通过以下验证器运行页面来查看这些https://validator.w3.org
对我来说，一个简单的npm cache clean --force就像一个符咒。