Install a npm package in two different version (vue2 and vue3), and failed to starting dev server

[sonofmagic]

I installed vue2 and vue3 in different apps.
Then i run turbo run dev --parallel

Vue3-app start successfully
But Vue2-app failed to starting dev server.

and the error shows packages version mismatch

Vue packages version mismatch:

- vue@3.2.31 (E:\github-workspace\my\universal-vue-library-template\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (E:\github-workspace\my\universal-vue-library-template\node_modules\vue-template-compiler\package.json)

How can i set my config to run both of them?

Expected

Vue3-app start successfully
Vue2-app start successfully

Screenshot

Repo Url

universal-vue-library-template

[ma-jahn]

Hi @sonofmagic ,

from my understanding this issue is not related to turborepo itself. It's actually an yarn workspaces related topic.

Within your error log you'll see that your vite project is loading vue 3 from the root node_modules directory.

Since both your apps are using the vue package in different versions you should make sure these dependencies are not being hoisted.

1. Remove your node_modules
rm -rf node_modules apps/**/node_modules

2. Remove your yarn.lock

3. Fix your package.json by adding / replacing workspaces

"workspaces": {
    "packages": [
      "packages/*",
      "apps/*"
    ],
    "nohoist": [
      "**/vue", "**/vue-template-compiler", "**/vite-plugin-vue2", "**/vite"
    ]
  },

4. Run yarn

5. Run yarn dev (make sure to rename dev2 to `dev' within your vue2 app

6. Enjoy :)

Hoisting Explained:
https://classic.yarnpkg.com/blog/2018/02/15/nohoist/

[sonofmagic]

Thanks a lot! 💯

[Suniron]

How can i do similar with pnpm ?

I do this in the root .npmrc:

public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=*prisma*
public-hoist-pattern[]=*vue*
public-hoist-pattern[]=*nuxt*
public-hoist-pattern[]=*i18n*
public-hoist-pattern[]=*vite*
strict-peer-dependencies=false
auto-install-peers=true
enable-pre-post-scripts=true

But I got this error on build:

[commonjs--resolver] Missing "./server-renderer" specifier in "vue" package

 ERROR  Missing "./server-renderer" specifier in "vue" package   

I think vue 3 is in conflict with vue 2 in my monorpeo

[vasilyman]

anybody know how to fix same problem on using npm ?

[Suniron]

My solution was to put the vue2 app in a ''standalone'' mode by excluding it from the monorepo.

Now, I migrated my app to Nuxt 3, so, it's fixed ''naturally'' for me 🫢