AWS Amplify White Screen Issue - reactjs

Question

i have followed various links etc. i am able to publish to aws amplify but i get a white screen.
i am using vss, github and amplify.
i wrote the code
then
npm run build -g
git commit --all -m phil
git push
this is just the basic react app.
i get the following when i inspect the page
GET https://main.d3k27zedi0496.amplifyapp.com/static/js/main.a7eadf0b.js net::ERR_ABORTED 403
any help greatly appreciated
heres my asset-manifest.json on my build directory
{
"files": {
"main.css": "/static/css/main.073c9b0a.css",
"main.js": "/static/js/main.a7eadf0b.js",
"static/js/496.d68808b8.chunk.js": "/static/js/496.d68808b8.chunk.js",
"static/media/logo.svg": "/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg",
"index.html": "/index.html",
"main.073c9b0a.css.map": "/static/css/main.073c9b0a.css.map",
"main.a7eadf0b.js.map": "/static/js/main.a7eadf0b.js.map",
"496.d68808b8.chunk.js.map": "/static/js/496.d68808b8.chunk.js.map"
},
"entrypoints": [
"static/css/main.073c9b0a.css", "static/js/main.a7eadf0b.js" ] }``
`
heres my app.js
import logo from "./logo.svg";
import "./App.css";
` function App() {
return (
building Application
);
}
export default App;
heres my package.json (i have had it with and without the homepage line)
`{
"name": "workflow",
"version": "0.1.0",
"private": true,
"homepage": "https://main.d3k27zedi0496.amplifyapp.com",
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"reactstrap": "^9.1.5",
"web-vitals": "^3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}``
this is my gitignore file
` # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
#amplify-do-not-edit-begin
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/logs
amplify/mock-data
amplify/mock-api-resources
amplify/backend/amplify-meta.json
amplify/backend/.temp
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplifyconfiguration.dart
amplify-build-config.json
amplify-gradle-config.json
amplifytools.xcconfig
.secret-*
**.sample
#amplify-do-not-edit-end
`

Answer 1

I had a similar issue today and I resolved it by completely removing: "homepage": "{URL}" from my package.json and after that I got a strange access denied anytime I tried to navigate to my other pages and found that this solution in case 3 helped.
I hope this helps you.