Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Webpack] Compilation warning when initializing intlTelInput with utilsScript #1620

Closed
carlssonemil opened this issue May 17, 2024 · 3 comments

Comments

@carlssonemil
Copy link
Contributor

Plugin version

v23.0.4

Steps to reproduce

  1. Have a webpack project (We use Vue)
  2. Import intlTelInput
  3. Initialise it with , e.g. intlTelInput(input, { utilsScript: <url_to_script> })

Expected behaviour

Input should be initialized and working.

Actual behaviour

The webpack compilation fails with the following error:

Critical dependency: the request of a dependency is an expression

Initialisation options

Here's how our initialisation looks:

const INTL_TEL_INPUT_UTILS_SCRIPT_URL = `https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.4/js/utils.min.js`;

this.telInput = intlTelInput(input, {
  utilsScript: INTL_TEL_INPUT_UTILS_SCRIPT_URL,
});

Additional information

I'm guessing the new way of handling the utilsScript is what's causing the issue. Right now we're doing what is outlined in the Initialisation options by providing an URL to the script. We're also using Vue so the React bundle with the utils script included won't work for us.

With the changes introduced in v23.0.0 that dynamically imports the utils script file rather than injecting a script tag, our Webpack setup seems to have an issue with the dynamic import. More specifically it has a problem with the loadUtils method:

var loadUtils = (path) => {
  if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
    intlTelInput.startedLoadingUtilsScript = true;
    return new Promise((resolve, reject) => {
      import(path).then(({ default: utils2 }) => {
        intlTelInput.utils = utils2;
        forEachInstance("handleUtils");
        resolve(true);
      }).catch(() => {
        forEachInstance("rejectUtilsScriptPromise");
        reject();
      });
    });
  }
  return null;
};

And most likely the import(path).then() method is the real culprit, as @BRAiNCHiLD95 also confirmed in #1616.


We're using Webpack v.5 if it's of any help.

@jackocnr
Copy link
Owner

Thanks for the write-up. This should now be fixed in v23.0.5.

@carlssonemil
Copy link
Contributor Author

@jackocnr thanks for the quick fix! We'll update and confirm if it works!

@BRAiNCHiLD95
Copy link

@jackocnr the magic comment worked! No more webpack warnings!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants