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!

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.