Syntax error in react app. Only on first load

Question

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!

I didn't read through the entire code you posted but; Do you always get the error if you hard refresh? (CTRL + F5) — Magnum
– Magnum, Commented Nov 1, 2018 at 17:53
No, doing a hard reload or an empty cache and hard reload doesn't cause the error to pop up again. Neither does an incognito, window for what it's worth. — Connor
– Connor, Commented Nov 1, 2018 at 17:59
Interesting... If it doesn't happen in incognito (which is what I would assume is a First Load scenario), can you define what you mean by "first load" more specifically? How are you ensuring this is being replicated? — Magnum
– Magnum, Commented Nov 1, 2018 at 18:12
I agree with you, which I why Im so confused. I have netlify set up so that it publishes a build when I commit to the master banch on my github repo. By "first load" I mean the first time anyone visits the site after netlify has built and published a new branch. — Connor
– Connor, Commented Nov 1, 2018 at 18:21
Does the error only occur on the first pageload after you have deployed to netlify? Does it occur locally at all? — Magnum
– Magnum, Commented Nov 1, 2018 at 18:22

Artur K. · Accepted Answer · 2018-11-01 20:43:35Z

3

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.

answered Nov 1, 2018 at 20:43

Artur K.

3,3193 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Connor Over a year ago

It looks like a caching error! Thank you for guiding me in the right direction.

Artur K. Over a year ago

For the edited part of the question I think you have multiple options available and first need to figure out what you want to achieve. Do you need service workers and what to cache and what not to. You might have better luck figuring these things out by reading the CRA Deployment guide or searching their Github issue tracker for similar issues.

Deadron · Accepted Answer · 2018-11-01 19:09:40Z

1

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

answered Nov 1, 2018 at 19:09

Deadron

5,2891 gold badge18 silver badges28 bronze badges

2 Comments

Connor Over a year ago

Cool tool! I fixed the errors and warnings. Also updated my original post to include the new index.html file. Unfortunately it did not fix the issue though.

Deadron Over a year ago

Too bad! That means the problem is probably in your javascript/css though.

Bylaw · Accepted Answer · 2023-08-08 12:09:08Z

0

For me a simple npm cache clean --force worked as a charm.

answered Aug 8, 2023 at 12:09

Bylaw

4511 bronze badges

Collectives™ on Stack Overflow

Syntax error in react app. Only on first load

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related