NPM7: Incorrect detection of Vue version

[gerardnll]

Hi, I was trying to use @vueuse/core when I ran into an issue with this package. I'm using npm 7.0.3, node 15.0.1 and my package.json looks like this:

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.2",
        "autoprefixer": "^10.0.1",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.0-beta.11",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "postcss-nested": "^4.2.3",
        "postcss-simple-vars": "^5.0.2",
        "resolve-url-loader": "^3.1.0",
        "sass-resources-loader": "^2.1.1",
        "tailwindcss": "^1.9.6",
        "tailwindcss-filters": "^3.0.0",
        "vue": "^3.0.2",
        "vue-loader": "^16.0.0-beta.10",
        "vue-router": "^4.0.0-rc.1",
        "vuex": "^4.0.0-rc.1",
        "@vueuse/core": "^4.0.0-beta.38"
    }
}

I'm using Laravel Mix to compile all the assets (I'll be using Laravel as a backend). Everything was going fine until I tried to use any function from the vueuse package.

The console error looked like this:

Going thru the module code I see some lines are overwritten depending of the Vue version and it looks like the module thinks I'm on version 2 of Vue. Manually changing those lines to the 'v3' fixed the issue. I'm not sure this is Laravel Mix fault (webpack wrapper) or not. Let me know how can I help fixing this issue.

[antfu]

@gerardnll Which package manager you are using? Can you try to run npx vue-demi-fix to see if it fixes your issue?

[gerardnll]

I'm using NPM. where am I supposed to run 'npx vue-demi-fix'? because executing that line in my project root throws:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/vue-demi-fix - Not found
npm ERR! 404
npm ERR! 404  'vue-demi-fix@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

[antfu]

What was weird. Did you bump the version of Vue from 2 to 3 after installing @vueuse? Could you try to remove your lockfile and node_modules and reinstall again?

[gerardnll]

I started the project with those dependencies and I added vueuse the last one.

Anyway, now I just get a warning (files are still pointing to v2 and app is broken)

[antfu]

Can you share a minimal reproduction? It seems to work fine on my Vue 2 and Vue 3 projects.

[gerardnll]

OK. But first, please, correct me if I'm wrong but, when I do npm i I guess the postinstall command of vue-demi is executed, right? If so, I'm just installing these:

{
    "private": true,
    "devDependencies": {
        "@vueuse/core": "^4.0.0-beta.38",
        "vue": "^3.0.2"
    }
}

and the content of node_modules/@vueuse/core/node_modules/vue-demi/lib/index.esm.js is:

export * from './v2/index.esm'

Is that how it's supposed to look?

[antfu]

Copied your code and did a clean install. It looks fine to me

Maybe try to upgrade your npm?

BTW

➜ npm -v    
6.14.8

[gerardnll]

I had to downgrade npm. But now, this warning appears and there's no longer this file node_modules/@vueuse/core/node_modules/vue-demi/lib/index.esm.js.

I think NPM changed some things with version 7. Take a look at this document in the section 'Breaking changes' I think there's some breaking things that this package is using, like 'require' and maybe even this affects.

Looks like with NPM 7 I had the dependencies of @vueuse inside and now I have them in the root node_modules/ that combined with the things pointed above may be one of the reasons the package functionality breaks.

[antfu]

@gerardnll I see. I have heard that npm 7 will install the peerDepenencies automatically. I will have a look at this to see if we can come up with a solution. Thanks.

[gerardnll]

Thanks! Ping me if you need some help testing.

[antfu]

I have released v0.4.3 and it should work for npm 7. Please give a try.

[gerardnll]

Yes. Looks like it's working on my main project (where I do the compiling). Great!