@vue/compat：无法读取未定义的属性（读取“getPrefixCls”），与 ant-design-vue 相关

Question

尝试使用 @vue/compat 和 Vite 的兼容性构建迁移到 Vue 3，并在控制台中收到与

ant-design-vue

相关的错误：

empty.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'getPrefixCls')

“vue”：“3.3.4” "vite": "4.3.9" "ant-design-vue": "2.2.8" “@vue/compat”：“3.3.4”， “@originjs/vite-plugin-commonjs”：“1.0.3” "@vitejs/plugin-vue": "4.2.3"

vite.config.js：

import { defineConfig } from 'vite'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import path from 'path'
import { fileURLToPath } from 'url'
// import { createVuePlugin } from 'vite-plugin-vue2' // Vue <= 2.6
// import vue from '@vitejs/plugin-vue2' // Vue 2.7
import vue from '@vitejs/plugin-vue' // Vue 3
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

const namelessClasses = () => ({
    name: 'nameless-classes',

    transform(code, importName){

        if (!importName.endsWith('.vue')){
            return null;  // Only applicable to regular vue file imports
        }

        // Form class name from cleaned filename
        let class_name = importName.split(path.sep).pop()
            .slice(0, '.vue'.length * -1)
            .replace(/[^a-zA-Z]/g, '')

        return code.replace('export default class extends Vue', `export default class ${class_name} extends Vue`)
    }
})

export default defineConfig({
    plugins: [
        // createVuePlugin(), // Vue <= 2.6
        vue({
            template: {
                compilerOptions: {
                    compatConfig: {
                        MODE: 2,
                        // MODE: 3,
                    }
                }
            }
        }),
        namelessClasses(),
        viteCommonjs({exclude: ['auth0-js']}, /* { skipPreBuild: true } */),
        Components({
            resolvers: [
                AntDesignVueResolver({
                  importStyle: 'less',
                }),
            ],
            dts: true,
            include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.jsx$/]
        })
    ],
    server: {
        port: 8080
    },
    resolve: {
        alias: {
            vue: '@vue/compat',
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            '~assets': fileURLToPath(new URL("./src/assets", import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
                additionalData: '@root-entry-name: default;',
            },
        },
    },
})

package.json：

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "export NODE_OPTIONS=--openssl-legacy-provider && vite",
        "vite": "vite",
        "build": "vite build --mode production",
        "build:staging": "vite build --mode staging",
        "lint": "eslint src"
    },
    "dependencies": {
        "@ant-design/icons-vue": "^6.1.0",
        "@microsoft/teams-js": "1.7.0",
        "@vue/compat": "3.3.4",
        "ant-design-vue": "2.2.8",
        "apexcharts": "3.20.0",
        "auth0-js": "9.21.0",
        "axios": "1.4.0",
        "d3": "5.7.0",
        "date-fns": "2.15.0",
        "fast-array-diff": "0.2.0",
        "fsevents": "2.3.2",
        "http-status": "1.4.2",
        "lodash": "4.17.19",
        "moment": "2.24.0",
        "normalizr": "3.6.0",
        "portal-vue": "3.0.0",
        "uuid": "9.0.0",
        "vee-validate": "4.10.5",
        "vue": "3.3.4",
        "vue-apexcharts": "1.6.0",
        "vue-check-view": "0.3.0",
        "vue-class-component": "8.0.0-rc.1",
        "vue-color": "2.7.1",
        "vue-country-flag": "1.3.1",
        "vue-country-region-select": "2.0.16",
        "vue-facing-decorator": "2.1.20",
        "vue-i18n": "8.20.0",
        "vue-json-tree-view": "2.1.6",
        "vue-property-decorator": "^10.0.0-rc.3",
        "vue-router": "4.2.2",
        "vue-scrollto": "2.18.2",
        "vue-tribute": "1.0.6",
        "vue-tsx-support": "2.3.3",
        "vue2-editor": "2.10.2",
        "vuex": "4.1.0",
        "vuex-class": "^0.3.2",
        "vuex-router-sync": "6.0.0-rc.1",
        "vuex-smart-module": "0.3.4",
        "xlsx": "0.15.6"
    },
    "devDependencies": {
        "@originjs/vite-plugin-commonjs": "1.0.3",
        "@types/auth0-js": "^9.10.6",
        "@types/chai": "^4.1.0",
        "@types/lodash": "^4.14.138",
        "@types/mocha": "^5.2.4",
        "@types/stripe-v3": "^3.1.9",
        "@types/uuid": "^3.4.5",
        "@vitejs/plugin-vue": "4.2.3",
        "less": "^4.1.3",
        "less-loader": "^11.1.3",
        "sass": "1.63.6",
        "tslib": "2.6.0",
        "typescript": "5.1.3",
        "unplugin-vue-components": "^0.25.1",
        "vite": "4.3.9"
    }
}

尝试使用ant-design-vue版本2.2.8和3.2.20

Answer 1

Ant DV Github 上有多个线程，这让我相信它们不支持兼容模式。在另一个 StackOverflow 线程上有一个 建议 建议修复向编译后的 ant-design-vue 添加补丁的问题，但我无法使其在本地工作：

import { defineComponent as defaultDefineComponent } from 'vue';
const defineComponent = obj => defaultDefineComponent({ ...obj, compatConfig: { mode: 3 } });