1

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?

Dharman
  • 30,962
  • 25
  • 85
  • 135
봉승우
  • 99
  • 1
  • 5

1 Answers1

0

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

Ramon Gomes
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – jasie Aug 25 '22 at 07:28