Uses the wrong vue version in monorepo

[sacki5]

Background

I have a monorepo using yarn workspaces that has a mix of both vue2 and vue3 applications.
I have added both vue and vue-demi to "nohoist" to avoid it being installed in the root node_modules.

Expected behavior

When using a package that implements vue-demi it should point to the correct vue version.

Actual behavior

All vue-demi always point to the vue2 version even if it's installed in a vue3 apps node_modules.

Screenshot

Minimal reproduction repo

https://github.com/sacki5/vue-demi-faulty-version-repro/tree/main

I am thankful for any help or insight in how to solve this.

[ESP-Marc]

I think I am facing a critical issue similar to this but the opposite way round.
I am using Pinia that consumes this lib, I tried 2.1.6 to 2.1.4 of Pinia used in Vue 2.7, it seems to be importing the v3 version or the file in the demi lib root that lacks an export for hasInjectionContext.

If i edit the Pinia project and change import { hasInjectionContext, inject, etc } from 'vue-demi'; to import directly from vue-demi/lib/v2.7' then my issue is resolved.

So I suspect that Vue version support switching broke in this lib ats some point in the past week?

I think this ticket is the same issue here: #230 which is the exact error I am facing.

[thedamon]

I'm having a similar issue. I'm looking at the line

var warn = Vue.util.warn

and a bit confused how this would ever work in Vue 3, though! In Vue 3 there is no default export so Vue is undefined, so Vue.util.warn would result in a TypeError (which is what I'm seeing in a Vue 3 project.. also a monorepo):

index.js:56 Unexpected error while loading ./components/timeline/vue3/stories/timeline.vue3.stories.js: 
Cannot read properties of undefined (reading 'util')
 TypeError: Cannot read properties of undefined (reading 'util')
    at ../../../node_modules/@vueuse/shared/node_modules/vue-demi/lib/index.mjs

[thedamon]

After some digging my own issue is related to the postinstall hook on vue-demi having run at some point and decided that the project was a Vue 2 project. Similarly to @ESP-Marc , this is a monorepo with both versions of vue present.
The docs here are helpful but when vue-demi comes in from vueuse or pinia or others as a dep of a dep it's definitely hard to figure out where the version is that's hooked up wrong. I ran the npx vue-demi-fix tasks in a number of folders and it said it wasn't found despite vue-demi being in the node_modules folder in that workspace.

[benlind]

I am in the process of upgrading my monorepo from Vue 2 to Vue 3. After reading @thedamon 's answer, I tried rm -rf node_modules && yarn install, and that fixed the issue. Apparently vue-demi will completely rewrite its index.cjs file during installation based on whether it thinks you're in a Vue 2 or 3 repo.

[joshuagauci]

I have sorted this issue by adding a post-install to our packages in a pnpm workspace.

in - package.json of vue 2 app

"postinstall" : "pnpm exec vue-demi-fix"

"bin" : { "vue-demi-fix" : "node_modules/vue-demi/bin/vue-demi-fix.js", },

This way after installation pnpm will run the vue-demi-fix and the correct vue version will be detected.

Hope it helps 🤞

[khamaileon]

Fix for vue-demi build issue with PNPM in GitHub Actions

If you're getting this error during pnpm build:

export 'hasInjectionContext' was not found in 'vue-demi'

And PNPM shows a warning about ignored build scripts, the issue is that PNPM is blocking vue-demi's build script, preventing it from properly detecting Vue 2 or Vue 3.

Solution:
Add this step before your build in GitHub Actions:

- name: Approve vue-demi build
  run: pnpm approve-builds vue-demi

This will allow vue-demi to execute its required setup and fix the issue. 🚀