CODEWITHSUNDEEP
reactjsamazon-s3npmamazon-cloudfrontserverless-framework
kareem
kareem

Reputation: 933

React app hosted on s3 unexpected token <

I am using servereless to deploy me backend and front end. My front end is using create react app. I believe after I made the following changes 

<img className="svg-width" src="/img/Icons/photographer-camera.svg" alt="camera icon" />



<img className="svg-width" src="/img/icons/photographer-camera.svg" alt="camera icon" />

Where I changed Icons/ to icons/ I get the following issue:

Uncaught SyntaxError: Unexpected token <

In my s3 bucket I navigate to img/ and verify that my directory is also lowercase for icons.

S3 Directory

The file in question of the syntax error is main.977eb738.js under /static/js/main.977eb738.js of my domain. But when I go to my bucket I don't see that js file. I see

JS Directory in S3

The code in the file its complaining about is the index.html in public/index.html in the create react app boilerplate. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

One more thing to note is this works fine locally and even on mobile. I thought this could be cloudfront caching so I waited a full day and still cannot get to the bottom of this error.

Upvotes: 10

Views: 6403

Answers (4)

James Shapiro
James Shapiro

Reputation: 6226

In my case, my CloudFront distribution was blocking access to all /static/* files. Creating a CF behavior that whitelisted that path resolved the issue.

Upvotes: 0

Peppe426
Peppe426

Reputation: 129

I would recomend anyone who is uploading directly to AWS S3 bucket to clear the CloudFront edge cache.

Using AWS CLI this can be done with the folowing line:

aws cloudfront create-invalidation --distribution-id YOURID --paths "/*"

In order to find the CloudFront Distribution Id navigate to cloudFront in AWS console.

Read more here: Invalidating Files

Upvotes: 3

prasham ashesh
prasham ashesh

Reputation: 9

I faced a similar issue. I wasn't using serverless(AWS lambda). What was happening was that inside my build/index.html somehow it was failing at the link's hrefs, and script's src tag.
So, I had
<link href="/static/css/main.866f5359.chunk.css" rel="stylesheet">
and I changed it to
<link href="https://s3-us-west-2.amazonaws.com/fullthrottle-labs-react-task/static/css/main.866f5359.chunk.css" rel="stylesheet">,
similarly for scripts as well.

So, instead of giving relative paths in build/index.html, giving an absolute path did the trick for me.

Upvotes: -1

Andy Garcia
Andy Garcia

Reputation: 404

I ran into the same issue. I tested incognito and the site worked fine in inco after doing a cache invalidation the same way that Michael stated in the first comment. It looks like it is browser caching alongside the Cloudfront caching.

I was able to resolve the issue by clearing browser cookies/data from the last day.

Upvotes: 5

Related Questions