简体   繁体   中英

Blank screen after deploying react app on Vercel

My package.json file where I also tried including the previous solutions "homepage"... in this

Any syntax mistakes or references I mistakenly added here in here? My build was successful but all I could see ia blank page in my deployed site

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.12.2",
    "@material-ui/pickers": "^3.3.10",
    "@reduxjs/toolkit": "^1.6.1",
    "@syncfusion/ej2-react-calendars": "^19.2.55",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "framer-motion": "^4.1.17",
    "mdbreact": "^5.1.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.4",
    "react-calendar": "^3.4.0",
    "react-datepicker": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-minimal-side-navigation": "^1.9.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-switch": "^6.0.0",
    "rsuite": "^4.10.2",
    "web-vitals": "^1.0.1",
    "homepage": "."
  },
  "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"
    ]
  }
}

My App.js file where I imported all my React and Redux Routers..

import "./App.css";
import Sidebar from "./Components/Sidebar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import FoodCatalog from "./Components/Pages/FoodCatalog";
import 'bootstrap/dist/css/bootstrap.min.css';
import Promotions from "./Components/Pages/Promotions";
import UserManagement from "./Components/Pages/UserManagement";
import axios from 'axios';
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import reducer from './redux/reducers'
import Tickets from "./Components/Pages/Tickets";



function App() {
  return (
    <Provider store={store}>
    <BrowserRouter>
      <div className="App">
        <div>
          <Sidebar />
        </div>

        <div style={{width: '100%',overflow: 'hidden'}}>
          <Switch>
            <Route path="/foodcatalog" component={FoodCatalog } />
            <Route path="/promotions" component={Promotions } />
            <Route path="/usermanagement" component={UserManagement } />
            <Route path="/tickets" component={Tickets } />
          </Switch>
          
        </div>
      </div>
    </BrowserRouter>
    </Provider>
  );
}

export default App;

Have you tried going into your vercel environment variables and putting:

CI=false

Sometimes vercel needs that environment variable in production.

Specifiying “homepage”

If you're using create-react-app, you won't have to deal with Webpack configs. (Which is nice) Instead – ejected or not – we just have to specify “homepage” in our package.json:

example

The way how create-react-app has it's webpack configuration set up, this will replace the publicPath with the correct base URL for your app. (If you want to know more about the publicPath setting, have a look at the Webpack documentation)

Refer this: https://www.andreasreiterer.at/fix-whitescreen-static-react-app/

For anyone facing the same problem while deploying react apps to Vercel, adding "homepage": "." to package.json worked for me. I was initially using gh-pages but wanted to shift to Vercel and hence I completely removed the homepage settings because of which I was getting a blank screen after visiting the deployed URL on vercel. So I added that homepage setting and finally worked.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM