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/Webpages/Register.js,src/Components/Phone.js,src/Webpages/Checkout.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.

CodePudding user response：

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.