Monorepo中同时构建Vue3与Vue2应用遇TypeError问题求助

错误信息 #

构建Vue3应用时触发如下错误：

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/cli-service/node_modules/vue-loader/dist/index.js):

TypeError: Cannot read properties of undefined (reading 'styles')
    at Object.loader (../../node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js:70:34)

 @ ./src/main.ts 2:0-28 5:10-13

相关环境信息 #

Monorepo工具: TurboRepo
包管理器: yarn v1

Vue3版本: 3.2.13
Vue2版本: 2.6.11

Vue3 cli版本: 5.0.8
Vue2 cli版本: 4.5.17

webpack for vue3: 5.54
webpack for vue2: 4.46

项目文件夹结构 #

├─ apps/
│  ├─ vue3-app/
│  │  ├─ package.json
│  ├─ vue2-app-1/
│  │  ├─ package.json
│  ├─ vue2-app-2/
│  │  ├─ package.json
├─ package.json

根目录workspaces配置 #

根目录package.json中声明了workspaces及nohoist规则：

"workspaces": {
    "packages": [
      "apps/vue2-app-1",
      "apps/vue2-app-2",
      "apps/vue3-app"
    ],
    "nohoist": [
      "vue3-app/**/vue",
      "vue3-app/**/vue/**",
      "vue2-app-1/**/vue/**",
      "vue2-app-1/**/vue/**",
      "vue2-app-2/**/vue/**",
      "vue2-app-2/**/vue/**",
      "vue3-app/**/vue-loader",
      "vue3-app/**/vue-loader/**",
      "vue2-app-1/**/vue-loader/**",
      "vue2-app-1/**/vue-loader/**",
      "vue2-app-2/**/vue-loader/**",
      "vue2-app-2/**/vue-loader/**"
    ]
}

已尝试的操作 #

• 怀疑根目录node_modules中的包版本冲突，导致Vue3加载了错误依赖，因此配置了yarn的nohoist选项隔离Vue及vue-loader版本，但问题未得到解决。

请问可能是什么原因导致该问题？

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