Homepage of React App Hosted on Amplify Returns a Blank Page Occasionally

[aaronlee232]

Before opening, please confirm:

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

App Id

d2so3m8bcmxfn4

Region

us-east-1

Amplify Hosting feature

No response

Describe the bug

I created a React App with route.js and hosted it using the GitHub option for Amplify.

Refreshing the homepage or loading the homepage will result in a blank page occasionally. Sometimes, the page renders correctly and other times it just appears as a blank white page.

This seems to only be occurring on the homepage.

The following errors appear when the website returns a blank page:

TypeError: Cannot read properties of null (reading 'classList')                             react-dom.production.min.js:216 
    at a.value (index.js:16:29)
    at yo (react-dom.production.min.js:219:411)
    at Tu (react-dom.production.min.js:259:160)
    at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
    at Bl (react-dom.production.min.js:122:325)
    at Pu (react-dom.production.min.js:252:279)
    at vu (react-dom.production.min.js:243:371)
    at react-dom.production.min.js:123:115
    at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
    at Bl (react-dom.production.min.js:122:325)



Uncaught TypeError: Cannot read properties of null (reading 'classList')            react-dom.production.min.js:123 
    at a.value (index.js:16:29)
    at yo (react-dom.production.min.js:219:411)
    at Tu (react-dom.production.min.js:259:160)
    at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
    at Bl (react-dom.production.min.js:122:325)
    at Pu (react-dom.production.min.js:252:279)
    at vu (react-dom.production.min.js:243:371)
    at react-dom.production.min.js:123:115
    at t.unstable_runWithPriority (scheduler.production.min.js:18:343)
    at Bl (react-dom.production.min.js:122:325)

Two other errors are generated by the console, but they seem to appear regardless of whether the website renders properly or not (not sure if these are relevant):

    GET https://charitypitch.texasusit.org/assets/css/style.css net::ERR_ABORTED 403
    GET https://charitypitch.texasusit.org/assets/css/colors/default.css net::ERR_ABORTED 403

Image of blank page:

Expected behavior

The website should be able to get the css resources and not be rendering a blank white page.

Properly rendered site:

Reproduction steps

1. Go to homepage
2. Refresh multiple times until blank page appears

OR

1. Repeatedly open Website URL in new tab
2. Blank page appears

Build Settings

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Additional information

• None of these errors or blank page occur when doing a local host in the production build folder of the react project.

• Several threads online suggested adding a rewrite for the index.html page, but that didn't work for me:

        Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>
        Target address/index.html
        Type: 200 (Rewrite)
  

• Tried switching to manual builds and used the compressed build folder. Same issue.

[ghost]

Hi @aaronlee232 👋🏽 we are investigating this error and will report with an update shortly.

[AnirudhaGohokar]

Facing same issue with nextjs SSR . Occasionally rendering blank page on fast redirections. No errors getting logged in cloudwatch as well

[kunalhdworks]

did you guys got any answer to it

[aaronlee232]

I ended up switching to using s3 buckets to host the site.

I still had issues with the blank page, but I think I managed to fix it. I think the error was a combination of missing css files and the trying to access a dom element that hasn't been mounted yet.

I fixed the css errors by explicitly adding the missing css files into the build directory in a github actions workflow step.

as for the DOM error, this line was my problem:

document.getElementById("top-menu").classList.add("nav-light");

The top menu element wasn't rendered in the dom yet, so I was essentially trying to access the classList of a null type.

I found a solution online which was to write an async version of getElementById

const getElementByIdAsync = id => new Promise(resolve => {
  const getElement = () => {
    const element = document.getElementById(id);
    if(element) {
      resolve(element);
    } else {
      requestAnimationFrame(getElement);
    }
  };
  getElement();
  alert("element got");
});

and change my original code to this

const topMenuElement = await getElementByIdAsync('top-menu');
topMenuElement.classList.add("nav-light");

[AnirudhaGohokar]

We had to switch to Vercel. Much faster and no blank issues coming their.
No help from this Amplify team!

[bsyo]

same issue here.
It occurs every time after an update.

[PacoLunaMX]

same issue here. It occurs every time after an update.

Did you fix the issue? I'm getting the same one deploying to S3 with Vite and React?

[bsyo]

same issue here. It occurs every time after an update.

Did you fix the issue? I'm getting the same one deploying to S3 with Vite and React?

yes. selfDestroying: true
https://vite-pwa-org.netlify.app/guide/unregister-service-worker

[saadataz]

@aaronlee232 the CSS files are not part of the build artifacts but they are referenced in your index.html. Can you please run the build locally and make sure those files generated in the build output.
assets/css/style.css
assets/css/colors/default.css

The 404 issue no longer repro. This could be related to client side transient network issues.

Please create a new Issue if you are still seeing the error.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.