amplify-hosting React App on Amplify returns blank page, 403 for chunk files

Before opening, please confirm:

[X] I have checked to see if my question is addressed in the FAQ.
[X] I have searched for duplicate or closed issues.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

App Id

d9gady0nmvl3

Region

us-west-2

Amplify Console feature

Custom builds, Manual deploys

Describe the bug

I have a simple CRA React app (using craco) that I am manually deploying to AWS Amplify by dragging the build folder to the Amplify Console UI in the Frontend section of my app. The Amplify Console notifies me that the build deploys successfully, but when I navigate to my deployed app's URL and enter in the username and password (I enabled password-protected access control for the app in the Amplify settings), it just shows a blank page. When I open up Chrome's dev console and check the console output and the Network tab, I see the following: Screen Shot 2021-07-01 at 12 44 34 PM

I see that it is accessing the main files just fine, but when it tries to lode the code chunks, it is getting 403 errors. When I click the first request for the first code chunk file, I see it is getting a 301: Screen Shot 2021-07-01 at 12 45 55 PM

Then I noticed that the response header's location includes a trailing /, and then the subsequent request to that location gets a 403: Screen Shot 2021-07-01 at 12 46 12 PM

I'm not sure if the trailing slash on the code chunk file matters, but I wonder if this is the issue? If not, generally it seems the problem seems to be that it is not properly serving the code chunk files of my app. I am generating the build output using the craco build command.

Should I be generating the build in some other way? Or is there some Amplify setting that I have configured incorrectly?

Any help would be greatly appreciated. Thanks a bunch!

Expected behavior

I expect the landing page to load and display to the user. My app's landing page looks like this:

Reproduction steps

Build CRA app using craco build command
Drag build folder to Amplify Console app Frontend section:
Navigate to https://dev8382.d9gady0nmvl3.amplifyapp.com/
Enter username and password to gain access to app
Observe blank white page is shown, and the dev console shows 403 errors getting code chunk files

Build Settings

N/A, I am building it manually, outside of Amplify CI

Additional information

It is a typescript React app, and the build output includes source map files as well. Also, the deployment seems to work if I ZIP the contents of the build folder and then drag and drop the zip file. This is acceptable for now, but if dragging and dropping the build folder itself is a supported deployment method, it should work! It actually worked for me the first couple of times I did it, so I don't know why it is failing now. Please either fix the folder drag and drop method, or stop supporting it and tell people they must use the zip file.

Thanks in advance for the investigation!

Jul 01 '21 16:07 mja2128

Hi :wave:, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!