search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. Now includes React and Vue components.
https://intl-tel-input.com
MIT License
7.57k stars 1.94k forks source link

window.intlTelInput is not a function #1207

Closed Norrch2 closed 2 years ago

Norrch2 commented 3 years ago

Hello,

I am following the instructions on getting started without a bundler and I am unable to get the example to work locally.

When I try to view the page I am getting a console error 'Uncaught TypeError: window.intlTelInput is not a function'. I am using Chrome version 89.0.4389.72. I am also using Intl-tel-input version: 17.0.12

Here is my index.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css\intlTelInput.scss"/>
  <title>Sample</title>
 </head>
 <body>
    <div>
        <input type="tel" id="phone"></input>
    </div>

    <script src="js\intlTelInput.js"></script>
    <script>
            var input = document.querySelector("#phone");

            window.intlTelInput(input, {
            // any initialisation options go here
            });
      </script>
 </body>
</html>

I get a screen with a plain input box and the following in the google console image

Steps to reproduce

  1. Follow Instructions on Getting Started Not Using a Bundler
  2. View the page in a browser
  3. Open the Console

Expected behaviour

The window to display a basic telephone number input field with INTL-Tel-Input support

Actual behaviour

I get an error "window.intlTelInput is not a function'

Initialisation options

no initialisation options.

alouarrani commented 3 years ago

Hello,

Angular 9, node 14, chrome 89.0.4389.90 and intl-tel-input 12.0.12 here. I've got the same issue with just one difference : image

mattkurek commented 3 years ago

I'm having the same issue. Tried the example, tried using jquery instead of querySelector, tried getElementById. Couldn't get it to work.

djamesfar commented 3 years ago

Using laravel jetstream with livewire, same issue. Looking in intlTelInput.js, indeed there is no function or object of any kind with the name 'intlTelInput'.
version 17.0.12

djamesfar commented 3 years ago

I had to revert to 17.0.8 to get this to work.

mtarregh commented 3 years ago

Having the same issue with 17.0.12 with Angular 11 and node 14.16.0

sandeep537 commented 3 years ago

Hello,

Angular 9, node 14, chrome 89.0.4389.90 and intl-tel-input 12.0.12 here. I've got the same issue with just one difference : image

Facing same issue. Did anyone got the sol using "intl-tel-input": "^17.0.12" angular 8

toplisek commented 3 years ago

I have tested and tried to move to lower version but did not manage. Uncaught TypeError: window.intlTelInput is not a function How to solve this?

pbrunisholz commented 3 years ago

Hello @Norrch2,

If I'm not wrong I think you're not using the right files.

I see that the file you're importing for css is : intlTelInput.scss

which comes from /src directory when I think you should use files from /build directory.

I guess you did the same for js files.

What do you say ?

Mihard2 commented 3 years ago

I had to revert to 17.0.8 to get this to work.

I agree. Seconded. Version 17.0.12 is not working. Except for an error in the console - it is not able to cause anything.

jackocnr commented 3 years ago

Yes I think pbrunisholz might be on to something - please can you guys (@Norrch2 etc) please confirm you are using the files from the build folder, rather than the src folder?

If you've checked and you're still seeing the problem with the build files, then please can you find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

Leonsito commented 3 years ago

Hi, I'm facing the same issue with 17.0.13 and using the files from the build folder. This is the line (145) that throws the error:

this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));

Uncaught TypeError: input.getAttribute is not a function

Btw, I'm using the library in an ASP.NET MVC solution.

Edit: Ok I found my problem, it's because the object I'm passing by was a jQuery object and not a DOM one

toplisek commented 3 years ago

I have checked your code again and used CodePen. I do not understand but locally it works without any issue but error is pushed when I use as an web/server version.

If you remove JavaScript code it will vanish an error.

It is an error in the line: var iti = window.intlTelInput(input, {

` var input = document.querySelector("#PHONEID"); var iti = window.intlTelInput(input, { // separateDialCode:true, utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js", });

`

jackocnr commented 2 years ago

Sorry I need a Codepen to be able to help. Closing for now.

duncan-chig commented 1 year ago

This may help someone: Laravel , using vite npm i intl-tel-input

then in app.js:

import './bootstrap';

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import jQuery from 'jquery';
import intlTelInput from 'intl-tel-input';

window.$ = jQuery;
window.Alpine = Alpine;

const input = document.querySelector("#phone");
intlTelInput(input, {
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js"
//  utilsScript: ""/build/js/utils.js" // i.e. resources/build/js folder
});

you should be able to use anywhere in the app.

yogesh7076 commented 1 year ago

'intlTelInput'. version 17.0.12

how to solve the problem

dmitry-pavlov commented 7 months ago

Getting window.intlTelInput is not a function error in Blazor WASM

CSS and JS files are linked in HEAD as desribed in this post How to build international phone number input in HTML and JavaScript

    <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: window.intlTelInput is not a function
      TypeError: window.intlTelInput is not a function
leonardomv1981 commented 2 months ago

I have this problem too. My mistake was that i didnt include: Works fine for now

Sothirich commented 1 month ago

Here is the solution: <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.8.1/build/js/intlTelInput.min.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.8.1/build/js/utils.js"></script>

You need to add script build/js/utils.js too

toplisek commented 3 weeks ago

Is it valid to put outside function ( //utilsScript: "../intlTelInput/js/utils.js",-) Can be improved bottom code due to updated version or there is updated demo? ` var intlTel = (function () { function init() { function getIp(callback) { fetch('https://ipinfo.io/json?token=XXX', {headers: {'Accept': 'application/json'}}) .then((resp) => resp.json()) .catch(() => { return { country: 'de', }; } ) .then((resp) => callback(resp.country)); }

var input = document.querySelector("#val_num_phone1"); window.intlTelInput(input, { // allowDropdown: false, // autoHideDialCode: false, // autoPlaceholder: "off", // dropdownContainer: document.body, // excludeCountries: ["us"], // formatOnDisplay: false, // geoIpLookup: function(callback) { // $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) { // var countryCode = (resp && resp.country) ? resp.country : ""; // callback(countryCode); // }); // }, // hiddenInput: "full_number", initialCountry: "auto", // localizedCountries: { 'de': 'Deutschland' }, // nationalMode: false, // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'], // placeholderNumberType: "MOBILE", preferredCountries:['fr', 'de', 'at', 'it', 'hr', 'rs'], // separateDialCode: true, geoIpLookup: getIp, //utilsScript: "../intlTelInput/js/utils.js", } ); } return { init }; }() ); `