Error Building utils.js with libphonenumber v20.3.0: 'grunt' Command Not Recognized

[vasundharakannan65]

Plugin version

v20.3.0

Steps to reproduce

1. Attempt to build the utils.js file.
2. Encounter the error message 'grunt' is not recognized as an internal or external command, operable program or batch file.

Expected behaviour

The utils.js file should be built successfully using the grunt command.

Actual behaviour

The build process fails with the error message 'grunt' is not recognized as an internal or external command, operable program or batch file.

Additional context

We have utilized the jQuery version of the plugin and are encountering issues where some valid phone numbers are being marked as invalid. To resolve this, we decided to update only the libphonenumber library without updating the entire plugin, selecting version 20.3.0. However, when trying to build the utils.js file, we encounter the above-mentioned error.

Also, is there any option to disable the additional country search feature added to latest version?

Thanks in advance.

[jackocnr]

Are you following the instructions here? Can you list the steps you have already run (have you done the npm install step in the root intl-tel-input dir?), and then specifically which command is giving you the error?

Also, is there any option to disable the additional country search feature added to latest version?

Not currently, though you could simply hide it with CSS. Can I ask why you would want to do this though?

[vasundharakannan65]

I'm very sorry, I completely forgot to run the npm install step in the root intl-tel-input directory. Thank you for pointing that out.

Regarding the additional country search feature, I understand there's currently no built-in option to disable it, and it can be hidden with CSS. We were looking for a manual option to disable it because we are updating from an older jQuery version to the new one, and this is one of the design changes we are facing.

Additionally, I noticed two new files, intlTelInputWithUtils.js and intlTelInputWithUtils.min.js. Upon looking into utils.js, I found:

const utils = window.intlTelInputUtilsTemp;
delete window.intlTelInputUtilsTemp;
export default utils;

This causes an error whenever I use intlTelInputUtils.formatNumber. Could you guide me on how to use it with the newer version?

Older version used: 17.0.19
Error found: intlTelInputUtils not found

[jackocnr]

Additionally, I noticed two new files, intlTelInputWithUtils.js and intlTelInputWithUtils.min.js.

These didn't exist in v20.3.0 - are you still using that version? If you stick with that version, and make sure you use that version of utils.js as well, then intlTelInputUtils.formatNumber should still work, provided you are sure that utils.js has already loaded on the page - have you checked your devtools, network tab to make sure utils.js has loaded successfully before trying to use it?

[vasundharakannan65]

We are currently using version 17.0.19 of your plugin. We are now updating to the latest version. I understand that the latest version has removed jQuery support and introduced intlTelInputWithUtils.js and intlTelInputWithUtils.min.js.

Despite loading utils.js as part of the intlTelInput bundle, attempting to use intlTelInput.utils.formatNumber() results in an error: 'Cannot read properties of undefined (reading 'formatNumber')'.

In the older version, I loaded utils.js in the following order, and referenced functions like intlTelInputUtils.formatNumber() successfully:

bundles.Add(
    new Bundle("~/bundles/intlTelInput")
    .Include("~/Scripts/intlTelInput/utils.js")
    .Include("~/Scripts/intlTelInput/intlTelInput.js")
);

For the newer version, I learned that we should use intlTelInput.utils.formatNumber() after it is loaded. Even though I can see the file loaded in the sources under page content, attempting to use it still results in the error 'Cannot read properties of undefined (reading 'formatNumber')'.

As a workaround, I have manually loaded the script using loadUtils, and in the callback, I used the regular function. Could you please guide me on how this can be done without manually loading the scripts?

[jackocnr]

I'm afraid I cannot reproduce this issue. I've put together this codepen which loads intlTelInputWithUtils.js (from v23.3.2) onto the page, and then accesses window.intlTelInput.utils.formatNumber just fine.

[vasundharakannan65]

I noticed in your CodePen sample that you have only loaded the intlTelInputWithUtils.js file. I did the same and was able to access window.intlTelInput.utils.formatNumber. I've made changes to your sample here. However, I think I might be accessing it incorrectly. Could you please take a look and let me know?

Currently, I have loaded it as shown below.

bundles.Add(
    new Bundle("~/bundles/intlTelInput")
    .Include("~/Scripts/intlTelInput/intlTelInputWithUtils.js")
);

My concern is that both intlTelInput and methods from utils are combined into one. What should I do if I want to update the utils in the intlTelInputWithUtils file?

I understand that for a separate utils.js file, you can follow the instructions mentioned here: Updating to a new version of libphonenumber.

[jackocnr]

What should I do if I want to update the utils in the intlTelInputWithUtils file?

If you follow the instructions to update utils.js locally, then you can re-build the intlTelInputWithUtils.js file by running npm run build:js. I'll close this issue for now, but do let me know if you have any more questions.