React blank page or 404 page after npm run build, Where did the problem come from?

user_12785664 0
Viewed 281

My index.html shows an empty page, after npm run build(react).

First of all, I tried this.

  1. adding in package.json
homepage : "./" or "." or "absolute file PATH"

And my package.json is...

{
  "name": "client",
  "homepage": "./",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.4",
    "bootstrap": "^5.1.0",
    "dotenv": "^10.0.0",
    "html-react-parser": "^1.3.0",
    "http-proxy-middleware": "^2.0.1",
    "quill": "^1.3.7",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.6",
    "react-dom": "^17.0.2",
    "react-ga": "^3.3.0",
    "react-html-parser": "^2.0.2",
    "react-icons": "^4.2.0",
    "react-kakao-maps-sdk": "^1.0.3",
    "react-loading-skeleton": "^3.0.1",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "react-use-clipboard": "^1.0.7",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "use-react-router": "^1.0.7",
    "web-vitals": "^1.1.2"
  },
  "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"
    ]
  }
}

and my app.js file is...

import React, { useEffect } from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";

//import some components omitted

const App = () => {
// some logical code
return (
        <BrowserRouter history={history}>

            <Switch>
                <Route path="/contact" component={Contact} exact />
                <Route path="/withdrawal" component={Withdrawal} exact />
                
                {* and some Route code omitted *}

                <Route path="*" component={ErrPage} />
            </Switch>
        </BrowserRouter>
    );
};

export default App;

What's the problem with my code? Or what setting should I do more?

react-router reactjs javascript
1 Answers

After you build your app, you need to open your "build" folder... and then open your index.html with an editor... After that you need search for sources that have "static", like this one:

So you need to put a point before the bar, like this example:

You need to put in all of static sources in this archieve.

An another if you're using react-router and trying to open index.html directly in the browser (or using electron, which essentially does that), in addition to setting homepage as others have suggested, replace your BrowserRouter with a HashRouter.

one solution similar this one you can see in this post: Blank page after running build on create-react-app

user_149022310
Related