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

Question

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

“[libphonenumber-js] metadata参数已传递，但它不是有效的元数据。必须是具有.countries子 object 属性的 object。得到形状为 object：{ 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 package 所示，并将电话输入从 package 直接导入结帐文件，而不是制作一个单独的组件来导入和呈现到结帐表单中，所有这些都是返回相同的错误。

Answer 1

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

Gitlab 问题：[3.2.1] (React-Hook-Form) 错误 [libphonenumber-js] metadata参数已传递，但它不是有效的元数据。