TypeError: Cannot read properties of undefined (reading 'default') - Vue 3 + Vuetify

I'm trying to migrate a Vue 2 + Vuetify project to Vue 3 (and Vuetify respective version), following this migration guide, but I'm getting the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')
    at LoaderSlot (vuetify_components.js?v=3010edea:2040:32)
    at convertLegacyAsyncComponent (chunk-UBAAKBY2.js?v=0f527f5d:7835:15)
    at convertLegacyComponent (chunk-UBAAKBY2.js?v=0f527f5d:7863:12)
    at _createVNode (chunk-UBAAKBY2.js?v=0f527f5d:8000:12)
    at createVNodeWithArgsTransform (chunk-UBAAKBY2.js?v=0f527f5d:7917:10)
    at default (vuetify_components.js?v=3010edea:8497:13)
    at normalizeChildren (chunk-UBAAKBY2.js?v=0f527f5d:8112:34)
    at createBaseVNode (chunk-UBAAKBY2.js?v=0f527f5d:7954:5)
    at _createVNode (chunk-UBAAKBY2.js?v=0f527f5d:8021:10)
    at createVNodeWithArgsTransform (chunk-UBAAKBY2.js?v=0f527f5d:7917:10)

My package.json file

  "dependencies": {
    "@vue/compat": "^3.1.0",
    "axios": "^0.27.2",
    "axios-retry": "^3.3.1",
    "core-js": "^3.8.3",
    "luxon": "^3.0.4",
    "socket.io-client": "^4.5.2",
    "vue": "^3.1.0",
    "vue-i18n": "^9.2.0",
    "vue-inline-svg": "^2.1.0",
    "vue-router": "^4.1.0",
    "vue-toastification": "^2.0.0-rc.5",
    "vuetify": "^3.1.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^9.8.0",
    "sass": "^1.32.7",
    "vite": "^2.5.4"
  }

My main.js file

import { createApp } from 'vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'

import App from './App.vue'

import router from './globals/router'
import vuetify from './globals/plugins/vuetify'
import i18n from './globals/plugins/i18n'
import toastOpts from './globals/plugins/toast'

// create vue app
const app = createApp(App)

// register plugins
app.use(Toast, toastOpts)
app.use(i18n)
app.use(router)
app.use(vuetify)

// mount app
app.mount('#app')

My vuetify.js file

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

import colors from '@/globals/styles/_export.module.scss'

export default createVuetify({
  components,
  directives,
  theme: {
    themes: {
      light: {
        primary: {
          lighten5: colors.primaryLighten5,
          lighten4: colors.primaryLighten4,
          lighten3: colors.primaryLighten3,
          lighten2: colors.primaryLighten2,
          lighten1: colors.primaryLighten1,
          base: colors.primaryBase,
          darken1: colors.primaryDarken1,
          darken2: colors.primaryDarken2,
          darken3: colors.primaryDarken3,
          darken4: colors.primaryDarken4,
        }
      }
    }
  }
})

If I comment out the app.use(vuetify) on the main.js file, the error goes away...so basically I need to know if that's actually a bug or am I doing something wrong on the installation?

Thanks to yoduh, I removed the @vue/compat package and it worked.

The @vue/compat documentation is pretty clear about this, I just missed it:

If your project relies on component libraries like Vuetify, Quasar or ElementUI, it is best to wait for their Vue 3 compatible versions