Menu
Im having some trouble figuring out exactly what the issue is here.
Whenever I deploy a new version of my react application, I get this error:
SyntaxError: expected expression, got '<'
However, the interesting part of the issue is it ONLY happens on the first load. If you press refresh on the browser, the issue goes away, and doesn't happen again until a new version is pushed out.
From what I can gather from other stack overflow posts:
React firebase error after build and deploy SyntaxError: expected expression, got '<'
The issue seems to lie in the index.html file, where I am loading a js script, but html is getting loaded, and the '<' character throws the error. Also, I never see this error when developing, only once built and deployed.
I am left scratching my head since the error only happens on first load.
Here is my index.html file:
<!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>
I use netlify to deploy my app, if that makes any difference.
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
Thanks for any help!
291
asked Apr 07 '26 18:04
I think the problem is cache + some non-existing script file.
1) If a local script file is missing it will probably handle it as a regular React application request and will return something starting with <!DOCTYPE html>, why you get the SyntaxError as it tries to parse the response as JS.
2) Additionally I think it has something to do with caching some parts of the application. Probably on your deploy you remove the old files, but the application is still looking for the old files with some previous hash: main.XXXXX.js. But during the deploy you removed those files completely and uploaded new scripts: main.YYYYYY.js.
Check the developer tools that all scripts return the expected JS file response and in case any of them are missing make appropriate changes to your cache headers and/or deployment scripts.
200
Your HTML file is not completely valid which may be causing this issue.
Script tags should be inside the head or body tag, not in between.
Place your link tags inside the head tag.
Remove the / from the end of your link tag.
There are a couple more issues with the posted code and improper async/defer usage. You can see these by running your page through a validator like https://validator.w3.org
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
