I am struggling to figure out why my react app will not render within my root div element. I have spent hours googling narrowing down my issue to my index.html being shown in the console but nothing else is rendering even though it appears to be set up correctly. This is on the Firefox browser so I am trying to understand why it is not displaying.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
);
import NavBar from './components/NavBar';
import Home from './components/Home';
import Login from './components/Login';
import AccountCreation from './components/AccountCreation';
import AddNewGame from './components/AddNewGame';
import GameStats from './components/GameStats';
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<>
<NavBar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/login' element={<Login />} />
<Route path='/accountcreation' element={<AccountCreation />} />
<Route path='/addnewgame' element={<AddNewGame />} />
<Route path='/gamestats' element={<GameStats />} />
</Routes>
</>
)
}
export default App;