intl-tel-input: window.intlTelInput is not a function

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

Steps to reproduce

Follow Instructions on Getting Started Not Using a Bundler
View the page in a browser
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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 16 (2 by maintainers)

Most upvoted comments

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.

duncan-chig on May 5, 2023

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 ?

pbrunisholz on May 6, 2021