CODEWITHSUNDEEP
javascriptvue.jslibphonenumber
cercxtrova
cercxtrova

Reputation: 1673

libphonenumber-js: 'Uncaught TypeError: A text for parsing must be a string'

I want to use the libphonenumber-js package (https://www.npmjs.com/package/libphonenumber-js) with Vuejs but I have a problem that I don't understand.

I import the package:

import { parsePhoneNumberFromString } from 'libphonenumber-js';

Vue.use(parsePhoneNumberFromString);

And in my component, I try to format the phone number of the user with this computed:

phoneNumberFormatting: function() {
  const rawPhoneNumber = parsePhoneNumberFromString(this.phoneNumber);
  return rawPhoneNumber;
}

phoneNumber is here:

function defaultData() {
  return {
    open:            false,
    maxLength:       25,
    playlisName:     '',
    loader:          false,
    userCreated:     false,
    step:            'login',
    phoneNumber:     '',
    formattedNumber: ''
  }
}

And, currently, I just want to display the formatted number:

              <div class="input-group">
              <input v-model="phoneNumber" id="phoneNumber" placeholder="+33 (0) 123456789" class="form-control">
                <div class="input-group-append">
                  <span class="input-group-text">{{phoneNumberFormatting}}</span>
                </div>
              </div>

But in my javascript console, I have an error:

Uncaught TypeError: A text for parsing must be a string.

This is where there's a problem in parsePhoneNumber.js:

export function normalizeArguments(args) {
    var _Array$prototype$slic = Array.prototype.slice.call(args),
        _Array$prototype$slic2 = _slicedToArray(_Array$prototype$slic, 4),
        arg_1 = _Array$prototype$slic2[0],
        arg_2 = _Array$prototype$slic2[1],
        arg_3 = _Array$prototype$slic2[2],
        arg_4 = _Array$prototype$slic2[3];

    var text = void 0;
    var options = void 0;
    var metadata = void 0;

    // If the phone number is passed as a string.
    // `parsePhoneNumber('88005553535', ...)`.
    if (typeof arg_1 === 'string') {
        text = arg_1;
    } else throw new TypeError('A text for parsing must be a string.');

    // If "default country" argument is being passed then move it to `options`.
    // `parsePhoneNumber('88005553535', 'RU', [options], metadata)`.
    if (!arg_2 || typeof arg_2 === 'string') {
        if (arg_4) {
            options = arg_3;
            metadata = arg_4;
        } else {
            options = undefined;
            metadata = arg_3;
        }

        if (arg_2) {
            options = _extends({ defaultCountry: arg_2 }, options);
        }
    }
    // `defaultCountry` is not passed.
    // Example: `parsePhoneNumber('+78005553535', [options], metadata)`.
    else if (isObject(arg_2)) {
            if (arg_3) {
                options = arg_2;
                metadata = arg_3;
            } else {
                metadata = arg_2;
            }
        } else throw new Error('Invalid second argument: ' + arg_2);

    return {
        text: text,
        options: options,
        metadata: metadata
    };
}

So here:

    // If the phone number is passed as a string.
    // `parsePhoneNumber('88005553535', ...)`.
    if (typeof arg_1 === 'string') {
        text = arg_1;
    } else throw new TypeError('A text for parsing must be a string.');

I don't understand because, even if I replace

const rawPhoneNumber = parsePhoneNumberFromString(this.phoneNumber);
return rawPhoneNumber;

by

const rawPhoneNumber = parsePhoneNumberFromString('+12133734253')
return rawPhoneNumber.number;

Like in the documentation, I still have the error.

Any idea?

Upvotes: 1

Views: 6924

Answers (2)

Sovalina
Sovalina

Reputation: 5609

Digging into the plugin files here:

export function parsePhoneNumberFromString()
{
  var parameters = Array.prototype.slice.call(arguments)
  parameters.push(metadata)
  console.log(parameters) //<= here
  return parsePhoneNumberFromStringCustom.apply(this, parameters)
}

it seems you pass all the Vue context as first parameter instead of string.

Removing Vue.use(parsePhoneNumberFromString) from your main.js should fix the problem.

Upvotes: 2

FrV
FrV

Reputation: 258

Here is the problem:

Change {{phoneNumberFormatting}} to {{phoneNumberFormatting()}}

Upvotes: 0

Related Questions