Is this Error expected?

[hannahwynnjones]

Hi,

I've added your libphonenumber-js code like the code snippet below , but I'm getting an angry error in the console and on my page when I don't put a number correctly in first time. This error was caused when I typed 'abc'.

The code works fine since in production the user doesn't see the errors, but we're seeing those errors in Kibana and that's getting very noisy. Is there a way of disabling this error? I would have expected to see this error if i'd have used parsePhoneNumberWithError but I'm not.

            <input
                class="input-phone__input"
                :placeholder="placeholder"
                v-model="phoneNumber"
                :data-ft="`${name}Input`"
                :readonly="!enabled"
                maxlength="20"
                @keyup.enter="$emit('submit')"
            />

....

import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js/max'

....
        const phoneNumber = computed({
            get () {
                return props.modelValue
            },
            set (value) {
                const character = value.slice(-1)
                let number

                // if character is '+' (and first character) AND number
                if ((character === '+' && value.length === 1) || !isNaN(character)) {
                    number = value
                } else {
                    number = value.substring(0, value.length - 1)
                }

                // value must be long enough and must be a valid phone number
                if (number.length > 1) {
                    const phoneNumber = parsePhoneNumber(number, countryCode)
                    number = phoneNumber.formatInternational(countryCode)
                }
                ctx.emit('update:modelValue', number)
            }
        })

Error:

parse.js:91 Uncaught ParseError: NOT_A_NUMBER
    at parse (parse.js:91:10)
    at parsePhoneNumberWithError (parsePhoneNumberWithError_.js:4:14)
    at parsePhoneNumberWithError (parsePhoneNumberWithError.js:6:35)
    at withMetadataArgument (withMetadataArgument.js:8:14)
    at parsePhoneNumberWithError (parsePhoneNumberWithError.js:5:29)
    at ComputedRefImpl.set [as _setter] (InputPhoneNumber.vue:59:57)
    at set value (reactivity.esm-bundler.js:1145:10)
    at Object.set (reactivity.esm-bundler.js:1033:21)
    at onUpdate:modelValue._cache.<computed>._cache.<computed> (InputPhoneNumber.vue:8:37)
    at HTMLInputElement.<anonymous> (runtime-dom.esm-bundler.js:1138:20)

[catamphetamine]

Hi. No one has ever reported something like that. Supposedly, it could be something with your code. I dunno. I won't be looking into this due to being busy. Also check that you're at the latest version of the lib.

[catamphetamine]

Also, perhaps you're importing parsePhoneNumber from an incorrect path. Instead, do this:

import parsePhoneNumber  from 'libphonenumber-js/max'

[hannahwynnjones]

Thanks @catamphetamine for your help - good to know it's likely an issue with my code

[hannahwynnjones]

I was able to put the code into a 'try' block to remove the errors, like:

                // value must be long enough and must be a valid phone number
                if (number.length > 1) {
                    try {
                        const phoneNumber = parsePhoneNumber(number, countryCode)
                        number = phoneNumber.formatInternational(countryCode)
                    } catch (error) {
                        // do nothing validation will pick this up
                    }
                }

[zakton5]

I have also faced this issue. That error is thrown whenever the string you try to validate is too short. So I just added a check before running parsePhoneNumber like: if (phone.length > 5).