I'm new to React and I know that there is a ton of answer about it but none of them works for me. I have created a React app hosted on AWS on a S3 bucket and deployed by AWS Cloudfront.
Sometimes, when I deploy my App with $ npm run deploy and I go to my browser, this shows a white screen with the error : chunk.js 404 on the console.(https://i.stack.imgur.com/Ri7qX.png)
This is my "package.json": I tried to set my "homepage": with:
- "/"
- "."
- "https://website.com/"
- "https://website.com/django-react-portal"
"package.json"
"name": "django-react-portal",
"version": "0.1.0",
"private": true,
"homepage": "/",
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"animate.css": "^3.7.0",
"antd": "^4.6.2",
"axios": "^0.18.1",
"bootstrap": "^4.5.2",
"build": "^0.1.4",
"clsx": "^1.1.1",
"dropzone": "^5.7.2",
"mailgun-js": "^0.22.0",
"material-ui": "^0.20.2",
"material-ui-dropzone": "^3.4.0",
"mdbreact": "^4.27.0",
"node-sass": "^4.14.1",
"popper.js": "^1.14.3",
"prop-types": "^15.7.1",
"react": "^16.13.1",
"react-axios": "^2.0.3",
"react-bootstrap": "^1.3.0",
"react-bootstrap4-form-validation": "^1.0.10",
"react-datepicker": "^3.1.3",
"react-dom": "^16.8.1",
"react-dropzone": "^11.0.3",
"react-dropzone-uploader": "^2.11.0",
"react-google-recaptcha-v3": "^1.5.2",
"react-icofont": "0.0.6",
"react-icons": "^3.11.0",
"react-image-lightbox": "^5.1.0",
"react-mailchimp-subscribe": "^2.1.0",
"react-modal-video": "^1.2.1",
"react-owl-carousel3": "^2.2.5",
"react-page-loading": "^1.0.2",
"react-recaptcha-hook": "^1.1.1",
"react-redux": "^7.2.1",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.3",
"react-scroll": "^1.7.10",
"react-scroll-up-button": "^1.6.4",
"react-visibility-sensor": "^5.0.2",
"react-wow": "^1.0.0",
"reactstrap": "^8.7.1",
"redux": "^4.0.5",
"redux-form": "^8.3.6",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^1.2.1",
"unidecode": "^0.1.8"
},
This is my "App.js":
function App() {
return (
<BrowserRouter>
<Page loader={"bubble-spin"} color={"orange"} size={25}>
<Switch>
<Route path="/" component={Particuliers} />
<Route path="/carrieres" component={Carrieres} />
{/* <Route path="/particuliers" component={} /> */}
<Route path="/entreprises" component={Entreprises} />
<Route path="/test" component={HeaderAdmin} />
<Route path="/concours" component={ConcoursCreate} />
<Route path="/confirmation-concours" component={ConfirmationConcours} />
<Route path="/politique-de-confidentialite" component={PolitiqueConfidentialite} />
<Route path="/succes" component={SuccesCarrieres} />
<Route path="/login" component={Login} />
<Route>
<Layout>
<Switch>
<PrivateRoute exact path="/careers" component={CareerList} />
<PrivateRoute
exact
path="/careers/:clientId"
component={CareerDetail}
/>
<PrivateRoute exact path="/concours-list" component={ConcoursList} />
<PrivateRoute exact path="/livestats" component={LiveStats} />
</Switch>
</Layout>
</Route>
</Switch>
</Page>
</BrowserRouter>
);
}
export default App;
This is my "index.js":
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
import "semantic-ui-css/semantic.min.css";
import { StateProvider } from "./StateProvider";
import reducer, { initialState } from "./reducer";
import App from "./App";
ReactDOM.render(
<BrowserRouter basename={"/"}>
<StateProvider initialState={initialState} reducer={reducer}>
<Route path="/" component={App} />
</StateProvider>
</BrowserRouter>,
document.getElementById("root")
);
The strange part about it is that if I wait around 5-10 hours, the app shows up with no error. It's like the white screen appears randomly after deploy, not after every deploy.
Thanks
