Search code examples
amazon-s3react-routerclojurescriptaws-amplifyre-frame

Unexpected token '<' for Nested URL Paths in AWS Amplify

I have a React web application built with AWS Amplify hosted in an S3 bucket.

I was always able to do navigation within the app (clicking on router links for example), but if I attempted to directly navigate to or refresh any page in the browser other than root, the page would be completely blank.

I added the following Rewrite rule and that solved the issue for routes a single / away from root. For example, I can now refresh the page or navigate directly to https://example.com/users

enter image description here

However, the issue persists when the URL route is nested beyond that.

For example, https://example.com/users/profile will still be a blank page if I route directly to it by typing the address in the URL bar or if I refresh the page while on it.

When I open the JS console to check for erros (Chrome browser) I see the following error:

app.js:1 Uncaught SyntaxError: Unexpected token '<'

Has anyone else faced this issue? I can't seem to find a solution that works. I've read that adding homepage: "/" to package.json or changing the start_url in the manifest.json file from "." to "/" should resolve this, but I've tried both and it did not work.

Any tips or guidance would be very much appreciated. Thanks to all in advance!

Solution

  • So the problem appears to have been the way I was importing app.js in my html file.

    I was importing it as follows: <script src="js/app.js"/>

    I changed it to: <script src="/js/app.js"/>

    and that did the trick. Now my pages refresh normally.