从 react-phone-number-input npm 包导入电话号码验证器时出错答案

【问题标题】：Getting an error while importing Phone number Validator from the react-phone-number-input npm package从 react-phone-number-input npm 包导入电话号码验证器时出错
【发布时间】：2023-01-31 02:15:50
【问题描述】：

我正在将包中的电话号码验证器导入到我页面上的结帐表单中，但是当我刷新页面时它显示此错误：

“[libphonenumber-js] metadata 参数已通过，但它不是有效的元数据。必须是具有 .countries 子对象的对象财产。得到一个形状的对象：{ default }。”

这是电话验证器的代码块
import React, {useState} from 'react'
import PhoneInput from 'react-phone-number-input'

function Phone() {
  // `value` will be the parsed phone number in E.164 format.
  // Example: "+12133734253".
  const [value, setValue] = useState()
  return (
    <PhoneInput
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}/>
  )
}

export default Phone
https://stackblitz.com/edit/react-eb2auu?file=src%2FWebpages%2FRegister.js,src%2FComponents%2FPhone.js,src%2FWebpages%2FCheckout.js

^ 这是整个网站/代码的托管版本。

我尝试使用一个简单的输入标签，如 npm 包中所示，并将电话输入从包中直接导入到结帐文件中，而不是制作一个单独的组件来导入和呈现到结帐表单中，所有这些都是返回相同的错误。

【问题讨论】：

我有同样的问题。但仅限于生产服务器，而不是本地开发服务器。你找到解决办法了吗？

标签： reactjs validation npm

【解决方案1】：

好像是react-phone-number-input版本的问题，我降级到3.2.0版本，报错没有了。

Gitlab Issue: [3.2.1] (React-Hook-Form) Error [libphonenumber-js] metadata argument was passed but it's not a valid metadata.

【讨论】：