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