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

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!

Source: React Router Questions