升级Vue 3搭配bootstrap-vue时出现导入与属性读取错误求助

问题描述 #

将Vue版本升级到3并使用bootstrap-vue时，出现以下报错与警告：

• 报错：TypeError: Cannot read properties of undefined (reading 'version') at ./node_modules/bootstrap-vue/esm/vue.js
• 警告：

warn  in ./node_modules/bootstrap-vue/esm/vue.js                                                                                                   22:59:50

• 提示：

export 'default' (reexported as 'Vue') was not found in 'vue'

已尝试官方文档的@vue/compat兼容方案，也更换过bootstrap-vue和@vue/compat的版本，问题仍未解决。当前package.json配置如下：

{
    "devDependencies": {
        "@babel/plugin-transform-runtime": "^7.18",
        "@babel/runtime": "^7.18",
        "@coreui/coreui": "^2.1.16",
        "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
        "@coreui/vue": "^2.1.2",
        "@fortawesome/fontawesome-free": "^5.9.0",
        "@symfony/webpack-encore": "^3.1.0",
        "axios": "^0.27",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "bootstrap": "^4.6.2",
        "bootstrap-vue": "npm:@ankurk91/bootstrap-vue@^3.0.2", 
        "chart.js": "^3.9.1",
        "core-js": "^3.25.3",
        "css-vars-ponyfill": "^2.4.8",
        "downloadjs": "^1.4.7",
        "moment": "^2.29.4",
        "node-sass": "^7.0.3",
        "perfect-scrollbar": "^1.5.5",
        "regenerator-runtime": "^0.13.9",
        "roboto-npm-webfont": "^1.0.1",
        "sass-loader": "^13.0.2",
        "vue": "^3.1.0",
        "@vue/compat": "^3.2.41",
        "vue-cal": "^2.24.8",
        "vue-chartjs": "^4.1.1",
        "vue-i18n": "^8.27.2",
        "vue-loader": "^17.1.0",
        "vue-notification": "^1.3.20",
        "vue-perfect-scrollbar": "^0.2.1",
        "vue-router": "^3.0.2",
        "@vue/compiler-sfc": "^3.1.0",
        "vuex": "^3.6.2",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "@types/file-saver": "^2.0.5",
        "file-saver": "^2.0.5"
    }
}

问题原因 #

1. Vue3导出机制变更：Vue3采用ES模块命名导出，不再提供default导出，而你使用的@ankurk91/bootstrap-vue@3.0.2仍在尝试导入Vue的默认导出，触发export 'default' was not found错误。
2. 版本不匹配：@vue/compat版本（3.2.41）与Vue核心版本（3.1.0）不一致，兼容层需要和Vue核心版本完全匹配才能正常工作。
3. 依赖兼容性冲突：项目中@coreui/vue@2.1.2、vue-router@3.0.2、vuex@3.6.2等都是Vue2专属依赖，即使使用@vue/compat，这类依赖也可能引发连锁兼容性问题，间接导致bootstrap-vue报错。

解决方案 #

步骤1：统一Vue及兼容层版本 #

修改package.json，确保vue、@vue/compat、@vue/compiler-sfc版本完全一致：

"vue": "^3.2.41",
"@vue/compat": "^3.2.41",
"@vue/compiler-sfc": "^3.2.41"

执行npm install更新依赖。

步骤2：配置兼容层全局导出 #

在项目入口文件（如main.js）中，手动模拟Vue2的默认导出并挂载到全局：

import * as Vue from '@vue/compat'

// 为依赖提供全局Vue对象
window.Vue = Vue
// 导出默认对象兼容旧导入方式
export default Vue

步骤3：配置Webpack别名指向兼容层 #

在Symfony Encore配置文件中，添加Vue别名，让所有依赖都指向@vue/compat：

const Encore = require('@symfony/webpack-encore');

Encore
  // ...其他原有配置
  .addAliases({
    'vue$': '@vue/compat'
  })
;

步骤4：替换Vue2专属依赖 #

如果上述步骤无效，需逐步升级项目中的Vue2依赖到Vue3兼容版本：

• @coreui/vue@2.x → @coreui/vue@4.x
• vue-router@3.x → vue-router@4.x
• vuex@3.x → vuex@4.x
• vue-i18n@8.x → vue-i18n@9.x

步骤5：切换官方Vue3兼容的BootstrapVue分支 #

如果第三方分支仍有问题，可切换到官方维护的Vue3版本：

npm uninstall bootstrap-vue
npm install bootstrap-vue-3 bootstrap

修改入口文件的导入代码：

import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'

const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

内容的提问来源于stack exchange，提问作者Antoni Seba