Closed Norrch2 closed 2 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 :
I'm having the same issue. Tried the example, tried using jquery instead of querySelector, tried getElementById. Couldn't get it to work.
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
I had to revert to 17.0.8 to get this to work.
Having the same issue with 17.0.12 with Angular 11 and node 14.16.0
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 :
Facing same issue. Did anyone got the sol using "intl-tel-input": "^17.0.12" angular 8
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?
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 ?
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.
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.
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
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", });
`
Sorry I need a Codepen to be able to help. Closing for now.
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.
'intlTelInput'. version 17.0.12
how to solve the problem
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
I have this problem too. My mistake was that i didnt include: Works fine for now
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
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 }; }() ); `
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
I get a screen with a plain input box and the following in the google console![image](https://user-images.githubusercontent.com/16027559/110473654-c606d980-80ac-11eb-8fd8-c6721091a352.png)
Steps to reproduce
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.