Ionic Vue项目中导入vue-phone-number-input失败求助

问题描述 #

我尝试在Ionic Vue项目中引入vue-phone-number-input组件，已通过npm install vue-phone-number-input完成安装。

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');
});

模板中使用方式：

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

运行后无效果且报错：

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)

原生Vue项目中导入该组件正常，但Ionic环境下无法成功，请问问题出在哪里？

问题原因及解决方案 #

原因 #

报错里的_c是Vue 2的内部VNode创建方法，而Ionic Vue基于Vue 3构建，说明你安装的vue-phone-number-input是Vue 2兼容版本，无法适配Vue 3环境。

解决步骤 #

1. 安装Vue 3适配版本
   卸载当前旧版本，安装支持Vue 3的分支版本：

   npm uninstall vue-phone-number-input
   npm install vue-phone-number-input@next
   

2. 推荐局部注册组件
   相比全局注册，局部注册更适合模块化开发，可避免全局命名冲突：
   在需要使用的组件中：

   <template>
     <vue-phone-number-input v-model="phoneValue" />
   </template>
   
   <script setup>
   import VuePhoneNumberInput from 'vue-phone-number-input';
   import 'vue-phone-number-input/dist/vue-phone-number-input.css';
   import { ref } from 'vue';
   
   const phoneValue = ref('');
   </script>
   

3. 确认版本兼容性
   检查package.json，确保依赖的是1.x及以上版本（Vue 3兼容版）：

   {
     "dependencies": {
       "vue-phone-number-input": "^1.1.0"
     }
   }
   

额外排查点 #

如果安装新版本后仍有问题：

• 升级Ionic Vue到最新稳定版，规避框架层面的兼容问题
• 确认v-model绑定的是Vue 3的响应式变量（如ref或reactive创建的变量）

内容的提问来源于stack exchange，提问作者CaPiTo26