React application returning an empty div when deployed on github pages

Question

I have been working on deploying the website I am working on to github pages but It seems to return an empty div when deployed. when served with npx serve build it displays all information fine, and is displays on local host normally but just returns a blank div when deployed on github pages.

steps I took to deploy:

1. installed gh-pages
2. added "homepage" to package.json
3. npm run deploy

The package.json code is listed below incase there is an error in there

{
  "homepage": "https://jonlev03-hub.github.io/media-pilot/",
  "name": "media-pilot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^4.0.0",
    "package.json": "^2.0.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "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"
    ]
  },
  "devDependencies": {
    "github-pages": "^0.1.0"
  }
}

and if you can't find any issues in that block of code all the code for the site is located inside my repository at github.com/jonlev03-hub/media-pilot .

Answer 1

This was an issue relating to the use of I hadn't specified a baseurl for the router to work with.