У меня возникли проблемы с выяснением, в чем именно заключается проблема.
Каждый раз, когда я развертываю новую версию своего приложения реагирования, я получаю эту ошибку:
SyntaxError: expected expression, got '<'
Тем не менее, интересная часть проблемы заключается в том, что это происходит ТОЛЬКО при первой загрузке. Если вы нажмете кнопку «Обновить» в браузере, проблема исчезнет и не повторится, пока не будет выпущена новая версия.
Из того, что я могу собрать из других сообщений о переполнении стека:
Реагирует на ошибку Firebase после сборки и развертывания. SyntaxError: ожидаемое выражение, получено '<' </a>
Проблема, похоже, заключается в файле index.html, где я загружаю скрипт js, но загружается html, а символ '<' выдает ошибку. Кроме того, я никогда не вижу эту ошибку при разработке, только однажды собрал и развернул. </p>
Я почесал голову, поскольку ошибка возникает только при первой загрузке.
Вот мой файл 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
Спасибо за любую помощь!