Vue3+Vuetify迁移报错：Cannot read properties of undefined (reading 'default')

我正在把Vue 2 + Vuetify的项目迁移到Vue 3和对应版本的Vuetify，按照Vue 3迁移构建指南操作后，出现了以下错误：

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)

我的package.json内容：

"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"
  }

main.js内容：

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')

vuetify.js内容：

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,
        }
      }
    }
  }
})

现在只要注释掉main.js里的app.use(vuetify)，错误就会消失。想知道这是Bug还是我的配置有问题？

问题分析与解决建议 #

这个问题大概率是版本不兼容+缺少Vue兼容模式配置导致的，不是Vuetify的Bug，具体原因和解决步骤如下：

1. 依赖版本不匹配
   Vue 3.1.0版本太老，Vuetify 3.1.x对Vue版本的要求是3.2及以上，低版本的Vue和Vuetify3搭配会出现组件加载逻辑的冲突，触发LoaderSlot里的属性读取错误。同时Vite 2.5.4和@vitejs/plugin-vue 1.6.1也偏旧，对Vue3的兼容支持不完善。

2. 缺少@vue/compat的配置
   使用@vue/compat做迁移时，需要在Vite里明确启用兼容模式，否则Vue2的组件语法转换会出错，和Vuetify3的组件加载逻辑冲突。

具体解决步骤：

• 升级依赖版本
  更新package.json中的相关依赖版本，示例如下（可根据实际情况调整到最新兼容版）：

"dependencies": {
  "@vue/compat": "^3.2.47",
  "vue": "^3.2.47",
  // 其他依赖保留，确保vue-router、vuex、vue-i18n版本和Vue3.2+兼容
},
"devDependencies": {
  "@vitejs/plugin-vue": "^2.3.3", // 对应Vite2.x的兼容版本，或者直接升级Vite到3.x+
  "@vue/compiler-sfc": "^3.2.47",
  "vite": "^2.9.16" // 或者升级到3.2.7等稳定版本
}

执行npm install更新依赖。

• 配置Vite的兼容模式
  在项目根目录的vite.config.js中添加compat配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2 // 启用Vue2兼容模式
          }
        }
      }
    })
  ]
})

• 检查异步组件写法
  项目中如果有Vue2风格的异步组件（比如用require动态导入），改成Vue3的defineAsyncComponent写法，避免转换错误。

完成以上步骤后，重新启动项目，应该能解决这个错误。

内容的提问来源于stack exchange，提问作者Arthur Borba