I have a problem building Vue3 and Vue2 apps in monorepo.
When trying to build the apps I see an error in Vue3 app:
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 tool: TurboRepo
Package manager: yarn v1
Vue3 version: 3.2.13
Vue2 version: 2.6.11
Vue3 cli version: 5.0.8
Vue2 cli version: 4.5.17
webpack for vue3: 5.54
webpack for vue2: 4.46
Folder structure
├─ apps/
│ ├─ vue3-app/
│ │ ├─ package.json
│ ├─ vue2-app-1/
│ │ ├─ package.json
│ ├─ vue2-app-2/
│ │ ├─ package.json
├─ package.json
In the root package.json I declared workspaces
"workspaces": {
"packages": [
"apps/vue2-app-1",
"apps/vue2-app-2",
"apps/vue3-app"
],
I think it could be a problem with packages in root node_modules (Vue3 trying to use wrong package version?) so I tried yarn nohoist option but it didn't change anything
"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/**"
]
What could be causing the problem?