intl-tel-input jQuery插件utilsScript加载报错求助

Hey there! Let's sort out that frustrating Uncaught ReferenceError: goog is not defined error you're seeing when using the utilScript option with the intlTelInput jQuery plugin. This issue usually boils down to mismatched versions, incorrect loading order, or using the wrong utility file. Here's how to fix it step by step:

Common Causes & Solutions #

1. Ensure Your utilScript File Matches the Plugin Version #

The utils.js file that intlTelInput relies on is tightly coupled to the plugin's version. Using a mismatched utils.js (e.g., a v17 file with v19 of the plugin) can break things, including missing the goog namespace that older versions depend on.

• Always download the utils.js that comes bundled with your specific intlTelInput release (check the official package's build folder).
• If using a CDN, make sure the utilScript URL points to the same version as the plugin.

2. Fix the Loading Order #

This is the most frequent fix. The plugin's initialization code must run after the utils.js file has fully loaded. Here are two reliable ways to handle this:

Option A: Load utils.js Manually Before Initialization

Skip the utilScript option entirely and include utils.js directly in your HTML, right after the intlTelInput script:

<script src="jquery.min.js"></script>
<script src="intlTelInput.min.js"></script>
<script src="utils.js"></script> <!-- Load this first -->
<script>
  $(document).ready(function() {
    $("#phone").intlTelInput({
      preferredCountries: ['us', 'ca']
      // No need for utilScript here
    });
  });
</script>

Option B: Use the Plugin's load Callback

If you prefer using the utilScript option, leverage the load callback to ensure utilities are ready before any dependent logic runs:

$("#phone").intlTelInput({
  utilScript: './path/to/utils.js', // Double-check this path!
  load: function() {
    // Any code that relies on utils (like number validation) goes here
    console.log("Utilities loaded successfully — no more goog errors!");
    const isValid = $("#phone").intlTelInput("isValidNumber");
    console.log("Phone number valid:", isValid);
  }
});

3. Don't Use Uncompiled Source Files #

If you're pulling utils.js directly from the GitHub repo's source code (not the pre-built build folder), you'll hit this error. The source version of utils.js depends on Google's Closure Library, which isn't bundled in the raw file. Always use the pre-compiled utils.js from the official release package.

4. Check for Path Errors #

Double-check that the path in utilScript is correct. If the browser can't find utils.js, it won't load the necessary code, leading to the goog error. Test the path by pasting it into your browser's address bar — if it doesn't load the file, fix the path (relative paths can be tricky depending on your project structure).

Example Working Setup #

Here's a complete, minimal example to get you up and running:

<!DOCTYPE html>
<html>
<head>
  <title>intlTelInput Fix</title>
  <link rel="stylesheet" href="intlTelInput.min.css">
</head>
<body>
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone">

  <script src="jquery.min.js"></script>
  <script src="intlTelInput.min.js"></script>
  <script src="utils.js"></script>
  <script>
    $(document).ready(function() {
      $("#phone").intlTelInput({
        initialCountry: 'us',
        utilsScript: false // We're loading utils manually above
      });
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Aarthi