Unable to import vue-phone-number-input on Ionic projet with VueJS

Issue

I'm trying to add vue-phone-number-input on my project. I have installed the package with npm install vue-phone-number-input.

Here is my main.js :

// Code ....
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';

const app = createApp(App)
  .use(IonicVue)
  .use(router)
  .use(VueCordova)
  .use(Camera)
  app.component("master-layout", MasterLayout)
  app.use(store);

  app.component('vue-phone-number-input', VuePhoneNumberInput);

  
  
router.isReady().then(() => {
  app.mount('#app');
});

And I've imported this line on my template :

<vue-phone-number-input v-model="yourValue" />

But nothing's happening. I have an error :

vue-phone-number-input.common.js?ea25:7355 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.render (vue-phone-number-input.common.js?ea25:7355:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:890:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5598:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5712:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5726:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5508:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5466:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5068:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:5252:1)

What's wrong? When I use native Vue, I've never had any problems importing modules. But with Ionic, I've never been able to.

Thank you.

Solution

That plugin only works with vue2 : https://github.com/LouisMazel/vue-phone-number-input/issues/159. Ionic uses vue3, you need to use the other plugin he provides.

Answered By - StackoverBlows