Using Vue3 and Vue2 simultaneously in monorepo

Viewed 19

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?

0 Answers
Related