Vue plugin not compiling on Vue2

[AlejandroMut]

Describe the bug The vue-imask plugin is not compiling on Vue2 app. Throws an error related to vue-demi

To Reproduce build or run dev a Vue2 (or Nuxt) app using vue-imask

Expected behavior A clear and concise description of what you expected to happen.

Environment:

• Windows
• vue-imask@6.2.0
• Nuxt 2.15.18

Additional context Output:

"export 'h' was not found in 'vue-demi'                                                                                                  friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'isRef' was not found in 'vue-demi'                                                                                              friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'onMounted' was not found in 'vue-demi'                                                                                          friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26
"export 'onUnmounted' was not found in 'vue-demi'                                                                                        friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'readonly' was not found in 'vue-demi'                                                                                           friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/composable.js                                                                                     friendly-errors 21:01:26

"export 'ref' was not found in 'vue-demi'                                                                                                friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/component3-composition.js                                                                         friendly-errors 21:01:26

"export 'toRef' was not found in 'vue-demi'                                                                                              friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26

 WARN  in ./node_modules/vue-imask/esm/component3-composition.js                                                                         friendly-errors 21:01:26

"export 'watch' was not found in 'vue-demi'                                                                                              friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26
 ERROR  Failed to compile with 1 errors                                                                                                  friendly-errors 21:01:26

This dependency was not found:                                                                                                           friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26
* @vue/composition-api/dist/vue-composition-api.esm.js in ./node_modules/vue-demi/lib/index.mjs                                          friendly-errors 21:01:26
                                                                                                                                         friendly-errors 21:01:26
To install it, you can run: npm install --save @vue/composition-api/dist/vue-composition-api.esm.js```

[uNmAnNeR]

hm, great ;) seems like

import { isVue3 } from 'vue-demi';

export default isVue3 ? Component3 : Component2;

resolves to Component3 in your case somehow. Can you please check isVue3 from vue-demi. Is it true or false? if true then probably it's related to vue-demi

[AlejandroMut]

Hi... How can I check that if my app won't compile and run? I don't even use vue-demi in the app, it´s just the dependency on vue-imask.

[ibdf]

I am having the exact same issue. I don't have vue-demi, but because it's a dependency of this package and it won't compile when using Vue2. Fails with the same error. I did see something at the vue-demi repo about this error - it was a matter of resolving the path to composition API - but they were using NUXT in that case.

See -> https://github.com/vueuse/vue-demi/issues/76

[jzs11]

Same, I am using Vue3 without vue-demi and having the exact the same issue here.

[AlejandroMut]

@jzs11 your issue doesn't seem to be related to this particular package (vue-imask)... More like vueuse.

[uNmAnNeR]

So i need to support both vue 2 and vue 3 for now. Using vue-demi seems the best way. But for vue 2 it means that you need to do some more steps to get it work. I will add it in a guide of course a bit later.

npm i -D @vue/composition-api should solve the problem.

and

If you are using NuxtJS you also need @nuxtjs/composition-api: npm i -D @nuxtjs/composition-api And then add '@nuxtjs/composition-api/module' in the buildModules option in your nuxt.config.js.

[alexcroox]

I assume that update will be a major semver bump as it’s a breaking change?

[AlejandroMut]

@alexcroox agreed this should definitely be a major version change. However I don't think I'll be updating vue-imask if I need to add two additional packages to my project. I'd rather stick to v6.0.7 until I update my project to Nuxt/Vue 3.

[uNmAnNeR]

it should be probably. I was checking it in my local environment and vue2 worked well without installing additional things. So supposed to be seamless, but... Anyway API for vue2 was not changed.

[uNmAnNeR]

@alexcroox agreed this should definitely be a major version change. However I don't think I'll be updating vue-imask if I need to add two additional packages to my project. I'd rather stick to v6.0.7 until I update my project to Nuxt/Vue 3.

as i understood from vue-demi guide it will not be included in final build if your bundler supports tree-shaking. but it needs to be proved. At least in imask i don't use composition-api for vue2 component.

[ibdf]

@alexcroox agreed this should definitely be a major version change. However I don't think I'll be updating vue-imask if I need to add two additional packages to my project. I'd rather stick to v6.0.7 until I update my project to Nuxt/Vue 3.

as i understood from vue-demi guide it will not be included in final build if your bundler supports tree-shaking. but it needs to be proved. At least in imask i don't use composition-api for vue2 component.

Was composition-api packaged with imask in the past and then removed? I've used this package for a little while and only started having issues around the time this ticket was opened.