Popover gives a TypeError

[GlennGeelen]

Hi,

I'm using the Popover element in my vue application like this

import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
...
<Popover class="relative">
    <PopoverButton>Solutions</PopoverButton>

    <PopoverPanel class="absolute z-10">
      <div class="grid grid-cols-2">
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </div>

    </PopoverPanel>
  </Popover>

My dependencies in the package file are:

"dependencies": {
    "@formkit/themes": "^1.0.0-beta.10",
    "@formkit/vue": "^1.0.0-beta.10",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@headlessui/vue": "^1.7.4",
    "@heroicons/vue": "^2.0.12",
    "@meforma/vue-toaster": "^1.3.0",
    "axios": "^0.27.2",
    "dayjs": "^1.11.6",
    "pinia": "^2.0.18",
    "vue": "^3.2.37",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.3"
  },

Now when I run npm run dev it works like I expect it to work. But when I npm run build and preview that build (also on the server where it is deployed) I get the following error:

TypeError: Cannot read properties of null (reading 'registerPopover')
    at setup (Header.549f2633.js:4:7456)
    at fn (index.20d8b901.js:1:13753)
    at Fv (index.20d8b901.js:1:49800)
    at Mv (index.20d8b901.js:1:49585)
    at lt (index.20d8b901.js:1:39268)
    at G (index.20d8b901.js:1:39159)
    at g (index.20d8b901.js:1:36070)
    at N (index.20d8b901.js:1:37512)
    at E (index.20d8b901.js:1:36796)
    at d (index.20d8b901.js:1:36615)

Is this a problem with my code, am I missing something? If you need any more information let me know.