升级Vue 3.2后项目编译失败，报TypeError: Cannot read properties of undefined (reading 'styles')

编译错误信息 #

ERROR  Failed to compile with 1 error                                                                                                          5:59:31 PM

 error  in ./src/App.vue

Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')


ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (/Users/xx/Desktop/Clients/xx/mi/node_modules/vue-loader/dist/index.js:96:34)
 @ ./src/main.js 2:0-27 23:17-20

ERROR in ./src/views/About.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (/Users/xx/Desktop/Clients/xx/mi/node_modules/vue-loader/dist/index.js:96:34)
 @ ./src/router/index.js 23:21-81
 @ ./src/main.js 4:0-29 21:2-8

ERROR in ./src/views/Home.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (/Users/xx/Desktop/Clients/xx/mi/node_modules/vue-loader/dist/index.js:96:34)
 @ ./src/router/index.js 3:0-36 14:15-19
 @ ./src/main.js 4:0-29 21:2-8

webpack compiled with 3 errors

本地npm依赖 #

mi@0.1.0 /Users/xx/Desktop/Clients/xx/mi
├── @vue/cli-service@5.0.8
├── @vue/compat@3.2.0
├── babel-eslint@10.1.0
├── bootstrap-vue@2.23.1
├── bootstrap@4.6.2
├── core-js@3.40.0
├── vue-loader@17.4.2
├── vue-router@4.5.0
├── vue-template-compiler@2.7.16
├── vue@3.2.0
└── watch@1.0.2

全局npm依赖 #

├── @angular/cli@18.2.1
├── @vue/cli-init@3.4.1
├── @vue/cli@5.0.8
├── angular2@2.0.0-beta.17
├── bower@1.8.0
├── corepack@0.31.0
├── ember-cli@2.9.1
├── es6-shim@0.35.1
├── eslint@9.11.1
├── forever@0.15.3
├── gulp-cli@1.4.0
├── gulp@3.9.1
├── javascripting@2.6.1
├── npm-check-updates@17.1.13
├── npm@10.9.2
├── particle-cli@1.17.1
├── phantomjs@2.1.7
├── react-tools@0.13.3
├── reflect-metadata@0.1.8
├── rxjs@5.0.0-rc.3
├── serve@14.1.2
├── typescript@5.5.4
└── zone.js@0.6.26

解决步骤 #

1. 移除Vue2专属依赖
   Vue3不再需要vue-template-compiler（Vue2模板编译工具），且bootstrap-vue@2仅支持Vue2，执行卸载命令：

   npm uninstall vue-template-compiler bootstrap-vue
   

2. 安装Vue3适配依赖
   安装Vue3对应的模板编译器，以及BootstrapVue的Vue3版本（若项目依赖BootstrapVue）：

   npm install @vue/compiler-sfc bootstrap-vue-next
   

3. 清理缓存并重装依赖
   删除旧依赖目录和锁文件，确保依赖完全更新：

   rm -rf node_modules package-lock.json
   npm install
   

4. 验证依赖兼容性
   当前@vue/cli-service@5.0.8与vue-loader@17.x版本兼容，无需调整。若问题仍存在，可尝试升级@vue/cli-service至最新稳定版。

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