Web show blank white screen when deploy new code

[sakshamjaiswal1]

Environment information

import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import { join } from "path";
import { defineConfig, loadEnv } from "vite";
import { VitePWA } from "vite-plugin-pwa";
const manifestForPlugIn = {
  registerType: "autoUpdate",
  includeAssests: ["favicon.ico", "apple-touc-icon.png", "masked-icon.svg"],
  manifest: {
    name: "Chaquen",
    short_name: "Chaquen",
    description: "I am a simple vite app",
    icons: [
      {
        src: "/pwa/logo192.svg",
        sizes: "192x192",
        type: "image/png",
        purpose: "favicon",
      },
      {
        src: "/pwa/logo512.svg",
        sizes: "512x512",
        type: "/chaquen.svg",
        purpose: "favicon",
      },
      {
        src: "/pwa/logo512.svg",
        sizes: "180x180",
        type: "image/png",
        purpose: "apple touch icon",
      },
      {
        src: "/pwa/logo512.svg",
        sizes: "512x512",
        type: "image/png",
        purpose: "any maskable",
      },
    ],
    theme_color: "#171717",
    background_color: "#f0e7db",
    display: "standalone",
    scope: "/",
    start_url: "/",
    orientation: "portrait",
    devOptions: {
      enabled: true,
      type: "module",
    },
  },
};

Description

I am using Vite ts PWA app and hosted in amplify and when i upload new code the screens go blank and i need to refresh atleast 3 times to get the page working.

Failed to load resource: the server responded with a status of 404 ()

[Jay2113]

Hi @sakshamjaiswal1 👋 , thanks for reaching out. I tried to reproduce the issue by accessing the website multiple times, but I was unable to replicate the outlined behavior. Are you encountering the 404 errors intermittently after a new deployment?

Additionally, can you capture a HAR file and share it with us? This will be helpful for us to investigate the network requests and responses. Steps to capture the HAR file are outlined here: https://repost.aws/knowledge-center/support-case-browser-har-file.

[sakshamjaiswal1]

Hey this happens immediately i deploy the new code and after a hard refresh it goes away let me reproduce this and share the HAR file

[sakshamjaiswal1]

@Jay2113 HAR FILE also can u try the link now i have deployed new code and its breaking again

[sakshamjaiswal1]

@Jay2113 hey did u find any solution for the above issue

[dk3775]

I am facing the same issue while deploying a nextjs project. Do we have any solutions?

[sakshamjaiswal1]

@dk3775 hey can u share ur error also this is also @Jay2113 can u please have a look i have shared HAR file

[dk3775]

Technically there is nothing in console and the page is just blank. More info on my project -> Nextjs on using pnpm and custom build commands.

Here's my build.yml file

version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'npm install -g pnpm'
                - 'pnpm install'
                - 'npx prisma generate'
        build:
            commands:
                - 'pnpm iso:build'
    artifacts:
        baseDirectory: apps/isomorphic/.next
        files:
            - '**/*'
    cache:
        paths:
            - 'node_modules/**/*'
    start:
        commands:
             - 'pnpm run iso:start'

It takes approx 9-12 mins to complete the workflow.

[sakshamjaiswal1]

Does your blank screen goes away when u do a hard refresh

[dk3775]

Nope i tried everything yesterday. Now I am thinking to create a issue in discord community.

[Jay2113]

@dk3775 can you share your app id and a HAR capture? Steps are outlined here: https://github.com/aws-amplify/amplify-backend/issues/1845#issuecomment-2284235885

[Jay2113]

@sakshamjaiswal1 I am unable to access the attached HAR file. Can you maybe compress the file and attach a zip file instead?

[sakshamjaiswal1]

t20-staging.chaquen.io.zip here

[sakshamjaiswal1]

hey were u able to find any solution

[Jay2113]

Hi @sakshamjaiswal1, we are investigating into the issue and will keep you posted with our findings.

[dk3775]

We are awaiting the response as this works with next.js but while using multiple workspaces inside it the same project it deploys successfully but shows blank screen and nothing in console

[dk3775]

Here's the build logs and HAR https://filetransfer.io/data-package/u1hAD1Wx#link

App id is : d34ms4gqusppp3

[Jay2113]

Hi @sakshamjaiswal1, apologies for the delayed response here. We have determined that the blank page issue is caused by a bug resulting from a version mismatch between the client-side and server-side (Amplify) versions of the application. This version skew occurs when the web browser is running an outdated version of the application, while the server is running a newer version.

To address this issue, we are actively working on a project and will keep this thread updated with any new developments.

[zhouru1bin]

Is there any progress?

Or what are my current methods to solve this problem?

[dk3775]

Is there any progress?

Or what are my current methods to solve this problem?

Not yet, they identified the issue internally and they are fixing it.