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

Question

I'm importing the phone number validator from the package into a checkout form on my page but it's showing this error when I refresh the page:

"[libphonenumber-js] metadata argument was passed but it's not a valid metadata. Must be an object having .countries child object property. Got an object of shape: { default }."

Here is the Code Block of the Phone Validator

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

^ This is a hosted version of the whole website/code.

I've tried to use a simple input tag as shown in the npm package as well as importing the phone input from the package directly into the checkout file rather than making a separate component to import and render into the checkout form and all of them are returning the same error.

Answer 1

It seems to be an issue with the version of react-phone-number-input , I downgraded to version 3.2.0 and the error is gone.

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