Question

我很难弄清这里到底是什么问题。

每当我部署React应用程序的新版本时，都会出现此错误：

SyntaxError: expected expression, got '<'

但是，问题的有趣之处在于它仅在第一次加载时发生。如果您在浏览器上按刷新，则该问题将消失，并且直到推出新版本后该问题才会再次发生。

根据我可以从其他堆栈溢出帖子中收集的信息：

React firebase error after build and deploy SyntaxError: expected expression, got '<'

问题似乎出在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

感谢您的帮助！

Answer 1

我认为问题是缓存+一些不存在的脚本文件。

1）如果缺少本地脚本文件，它可能会将其作为常规的React应用程序请求处理，并会返回以<!DOCTYPE html>开头的内容，为什么会出现SyntaxError，因为它试图将响应解析为JS。

2）另外，我认为这与缓存应用程序的某些部分有关。可能在您的部署上，您删除了旧文件，但是应用程序仍在寻找带有以前哈希值的旧文件：main.XXXXX.js。但是在部署过程中，您完全删除了这些文件并上传了新脚本：main.YYYYYY.js。

检查开发人员工具，确保所有脚本均返回预期的JS文件响应，并在缺少脚本的情况下对缓存标头和/或部署脚本进行适当的更改。

Answer 2

您的HTML文件不是完全有效，可能导致此问题。

脚本标签应位于head或body标签内部，而不是两者之间。
将链接标签放置在head标签内。
从链接标记的末尾删除/。

已发布的代码还有更多其他问题，并且异步/延迟用法不正确。您可以通过https://validator.w3.org

这样的验证程序运行页面来查看这些内容

React应用中的语法错误。仅在第一次加载时

2 个答案: