Manifest: Line: 1, column: 1, Syntax error on Chrome browser React AWS Amplify

Question

Solution: AWS Amplify Redirects

Currently doing some performance tweaks to a website and on my local host serve, I'm seeing that it's a progressive app & Manifest loads with a warning (view screenshots)

Once I push it to my AWS Amplify live site I see lighthouse errors plus Manifest: Line: 1, column: 1, Syntax error (view screenshots)

Reference answer: https://stackoverflow.com/a/63471356/14013010 doesn't work move the top and added requested

Reference answer: https://stackoverflow.com/a/65156528/14013010 Could also relate to this although I'm unsure where I would need to provide this in my amplify.yml or manifest file

Live Lighthouse

Localhost Lighthouse

Mainfest live

Mainfest Localhost

{
 "short_name": "unnecessary",
 "name": "unnecessary",
 "description": "unnecessary",
 "lang": "en",
 "start_url": "/",
 "background_color": "#ffffff",
 "theme_color": "#ffffff",
 "dir": "ltr",
 "display": "standalone",
 "orientation": "any",
 "icons": [
  {
   "src": "/android-chrome-192x192.png",
   "type": "image/png",
   "sizes": "192x192",
   "purpose": "any"
  },
  {
   "src": "/android-chrome-512x512.png",
   "type": "image/png",
   "sizes": "512x512",
   "purpose": "any"
  },
  {
   "src": "/apple-touch-icon.png",
   "type": "image/png",
   "sizes": "180x180",
   "purpose": "any"
  },
  {
   "src": "/favicon-16x16.png",
   "type": "image/png",
   "sizes": "16x16",
   "purpose": "any"
  },
  {
   "src": "/favicon-32x32.png",
   "type": "image/png",
   "sizes": "32x32",
   "purpose": "any"
  },
   {
   "src": "/maskable_icon.png",
   "type": "image/png",
   "sizes": "180x180",
   "purpose": "any maskable"
  }
 ]
}

index.html

```<link rel="manifest" 
crossorigin="use-credentials"  
href="%PUBLIC_URL%/site.webmanifest" />```

Solution: AWS Amplify Redirects