react npm build 在选项卡上显示图标，但它只是一个空白页面

Question

我有一个 typescript react 应用程序，我正在尝试为 delpoy 构建它。

在运行 npm run build 和 serve -s build 之后，我的应用程序启动了，但它只是一个空白页面。图标在选项卡上可见。

我正在使用@reach/router作为我的路由器，不知道它是否与这个问题有关。

我试过：

将 homepage: "." 添加到 package.json
将 homepage: "./" 添加到 package.json
在 package.json

homepage

在本地提供应用程序或将其部署到 firebase 后，我只收到空白页面。我可以看到正在创建的块和部署的文件。

部署的版本托管于：https://rezervavila-prod.web.app/

编辑： 我看过这个 that BrowserRouter was an issue for some. In my case I'm using @reach/router Router 但我找不到修复程序。

package.json:

{
  "name": "app",
  "homepage": ".",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.3.10",
    "@reach/router": "^1.3.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/firebase": "^3.2.1",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/reach__router": "^1.3.7",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.16",
    "axios": "^0.21.1",
    "clsx": "^1.1.1",
    "date-fns": "^2.19.0",
    "firebase": "^8.2.7",
    "moment": "^2.29.1",
    "node-cache": "^5.1.2",
    "prettier": "^2.2.1",
    "query-string": "^6.14.0",
    "react": "^17.0.1",
    "react-big-calendar": "^0.33.2",
    "react-dom": "^17.0.1",
    "react-image-file-resizer": "^0.4.2",
    "react-localize-redux": "^3.5.3",
    "react-redux": "^7.2.2",
    "react-scripts": "4.0.2",
    "react-toastify": "^7.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "typescript": "^4.1.2",
    "uniqid": "^5.3.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:development": "env-cmd -f .env.development npm run build",
    "build:production": "env-cmd -f .env.production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-big-calendar": "^0.30.0",
    "@types/react-toastify": "^4.1.0",
    "@types/uniqid": "^5.3.0",
    "organize-imports-cli": "^0.8.0",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^5.0.0",
    "tslint-react-hooks": "^2.2.2"
  }

Answer 1

您的生产环境变量丢失REACT_APP_API_URL

react npm build 在选项卡上显示图标，但它只是一个空白页面

react npm build shows favicon on tab but it is only a blank page

firebase

typescript

reactjs

serve