GitHub Pages React Project shows a blank page (nothing inside <div id="root">)

Question

After deploying my GitHub portfolio project (source repo) using:

react-scripts build --entry ./src/index.jsx
npx gh-pages -d build

The final deployed page has nothing inside <div id="root"></div>.

I've had a successful deployment with a fresh test react app.

npx create-react-app test

And when I slowly migrate code to the test react app here are the results:

1. [successful] package.json and index.jsx
2. [fail] App.jsx and remaining components

Here is a portion of my code, full code can be found in the source repo linked above:

package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://ltbd78.github.io/test",
  "dependencies": {
    "@emailjs/browser": "^3.10.0",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "animate.css": "^4.1.1",
    "loaders.css": "^0.1.2",
    "prettier": "^2.8.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.0",
    "react-loaders": "^3.0.1",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
    "sass": "^1.58.0",
    "serve": "^14.2.0",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "gh-pages": "^5.0.0"
  },
  "scripts": {
    "start": "react-scripts start --entry ./src/index.jsx",
    "build": "react-scripts build --entry ./src/index.jsx",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prettier": "npx prettier --write .",
    "predeploy": "npm run build",
    "deploy": "npx gh-pages -d build",
    "serve": "npx serve -s build"
  },
  "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"
    ]
  }
}

index.jsx

import "./index.scss";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

App.jsx

import "./App.scss";
import { Routes, Route } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";
import Layout from "./components/Layout";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
}

Answer 1

You are using react-router, so you will need to specifiy a basename atrribute to the Router.

import React from 'react';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";

import './App.scss';
import {Home} from "./views/home/Home";
import {Counter, CounterClassic} from "./views/counter";
import {ListItems} from "./views/list-rendering/ListItems";
import {TodoContainer} from "./views/todos/TodoContainer";

function App() {
    return (
        <Router basename={process.env.REACT_APP_URI}>
            <nav>
                <Link to="">Home</Link>
                <Link to="counter">Counter</Link>
                <Link to="counter-classic">Counter (classic)</Link>
                <Link to="list-rendering">List rendering</Link>
                <Link to="todo-list">TODO List</Link>
                <a target="_blank"
                   href="https://github.com/sombriks/react-studies" 
                   rel="noreferrer">See on github</a>
            </nav>
            <Routes>
                <Route path="" element={<Home/>}/>
                <Route path="counter" element={<Counter/>}/>
                <Route path="counter-classic"
                       element={<CounterClassic/>}/>
                <Route path="list-rendering"
                       element={<ListItems items={[
                           {id: 1, label: "One"},
                           {id: 2, label: "two"}]}/>}/>
                <Route path="todo-list" element={<TodoContainer/>}/>
            </Routes>
        </Router>
    );
}

export default App;

More detailed explanation here.