(in promise) TypeError: Cannot read properties of null (reading 'parentNode')

Hi,

I am just simply clicking on Contact page link

here is my Navigation inside Header.vue:

<ul
      class="md:flex items-center cursor-pointer md:px-0 px-10 md:pb-0 pb-10 md:static absolute md:w-auto w-full top-14 duration-700 ease-in"
      :class="[open ? 'left-0' : 'hidden']"
    >
      <li class="my-8 md:my-0 md:mx-2">
        <router-link
          class="text-white hover:border-b-2 border-white font-bold p-2"
          to="/"
          >Home</router-link
        >
      </li>
      <li class="my-8 md:my-0 md:mx-2">
        <router-link
          class="text-white hover:border-b-2 border-white font-bold p-2"
          to="/contact"
          >Contact</router-link
        >
      </li>
    </ul>

here is my router:

import { createRouter, createWebHashHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import ContactView from "../views/ContactView.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/contact",
    name: "contact",
    component: ContactView,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

Here is my App.vue:

<template>
  <div>
    <Header />
    <router-view />
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "AppView",
  components: {
    Header,
    Footer,
  },
};
</script>

why am I getting: (in promise) TypeError: Cannot read properties of null (reading 'parentNode')