So I am trying to fix my starting page on my website but it just printing out my error Cannot read properties of undefined (reading 'username') this is my error

I tried to fix my error by deleting it but it keept on printing out the error but with a different property so I think the problem is not that property but singleHighscore

const express = require("express");
const router = express.Router();
const db = require("../queries");

/* GET home page. */
router.get("/", async function (req, res, next) {
  const highscore = await db.getHighscore(1);
  const game = await db.getGame(1);
  const games = await db.getGames(10);
  const highscores = await db.getHighscores(10);
  const searchGames = await db.getSearch("C");
  res.render("index", {
    title: "Express",
    games: games,
    highscores: highscores,
    singleHighscore: highscore,
    singleGame: game,
    searchGames: searchGames,
  });
});

module.exports = router;

This top code is the one that affect the bottom code

<div>
  <p><%=singleHighscore.username%></p>
  <p><%=singleHighscore.game.name%></p>
  <p><%=singleHighscore.score%></p>
  <p><%=singleHighscore.active%></p>
</div>

This is bottom code affect the get getHighscores

const getHighscore = async (id) => {
  let highscore;
  const pool = new Pool(credentials);

  await pool
    .query(`SELECT * FROM public.highscores WHERE id= ${id}`)
    .then((res) => {
      highscore = res.rows[0];
    });
  if (highscore && highscore.hasOwnProperty("gameid"))
    await pool
      .query(`SELECT * FROM public.games WHERE id= ${highscore.gameid}`)
      .then((res) => (highscore.game = res.rows[0]));

  return highscore;
};