I'm trying to integrate intl-tel-input to support a phone number input field in an HTML form on my website. I installed the package using npm and my code looks like -
HTML file (index.html)
inside head tag
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="node_modules/intl-tel-input/build/css/intlTelInput.css">
top of body
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="node_modules/intl-tel-input/build/js/intlTelInput.js"></script>
form section
<div class="row">
<form class="early-access-form" action="/early-access" method="post">
<input type="text" name="firstName" placeholder="First Name" class="form-field col-lg-2">
<input type="text" name="lastName" placeholder="Last Name" class="middle-field col-lg-2">
<input type="text" name="companyName" placeholder="Company Name" class="middle-field col-lg-2">
<input type="tel" id="phone">
<script>
var input = document.querySelector("#phone");
var iti = window.intlTelInput(input, {
separateDialCode:true,
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/js/utils.js",
});
</script>
<input type="email" name="email" placeholder="Email" class="bottom-field col-lg-2">
<button class="btn btn-outline-light form-button col-lg-2" type="submit" name="submit">Sign me up!</button>
</form>
</div>
This seems to work fine when I open the file in my browser. Screenshot of form -
Screenshot of browser when I open the file from my system.
However, post deployment through Firebase hosting, this seems to break and the same form looks like -
According to the DevTools console, the error is - 'window.intlTelInput is not a function'
I have already checked multiple solutions for the same error but I'm unable to make it work. Can somebody please point out the error, and why it's happening?
