Issue in Salesforce with dynamic import of utils.js about intl-tel-input HOT 9 CLOSED

So our ask is this: can we get a version of the bundled file which does not have the 'import' statement at all?

Dynamic imports are perfectly valid JavaScript, which will run in all modern browsers. I don't want to add the complexity of building a separate version of the plugin just because your build system doesn't like some valid JavaScript.

Can you tell me what bundler/version/config you're using? Maybe there will be an easy solution to make your build system accept/ignore this line?

from intl-tel-input.

Can you tell me what bundler/version/config you're using? Maybe there will be an easy solution to make your build system accept/ignore this line?

Sure, we are using V23.1.0. The bundler we are using is build/js/intlTelInputWithUtils.js. This article shows how 3rd party JS libraries can be used with Salesforce, specifically with LightningWebComponents, which is our use case: https://developer.salesforce.com/docs/platform/lwc/guide/js-third-party-library.html

from intl-tel-input.

So after a few Googles on that error message, the issue may be that webpack is not correctly removing the 'import' statement when the bundle is created.

from intl-tel-input.

Instead of build/js/intlTelInputWithUtils.js, can you try using build/js/intlTelInputWithUtils.min.js instead and see if that fixes the issue?

from intl-tel-input.

Closing due to inactivity.

from intl-tel-input.

@forceclihk I've just released v23.1.2 which removes the dynamic import in any build file that already includes utils. Can you give that a try and let me know if it fixes the issue for you?

from intl-tel-input.

@jackocnr We are in the process of testing this, and will let you know if it fixes the issue. In the meantime, we have come across another issue with the dynamic import change. Prior to this, we were able to use the variable intlTelInputUtils directly. We can no longer do this. We have a couple of places where we were using it directly because we did not have access to the input field itself as an HTML element, but only the value of what the user inputs(this is due to how certain Salesforce features work). So we need to modify our code to use an HTML element as a parameter to the intlTelInput constructor. Right now we are doing this by using document.createElement() to create a "dummy" element, which we then pass into the constructor. This seems to be working, but is rather kludgy. Do you have a better/best practice you can recommend for this?

from intl-tel-input.

Prior to this, we were able to use the variable intlTelInputUtils directly. We can no longer do this.

So previously, you would have loaded utils.js onto the page and then accessed it via window.intlTelInputUtils. Now, if you load intlTelInputWithUtils.js onto the page, you can then access the utils via window.intlTelInput.utils, or if you're importing the module into your code with something like this import intlTelInput from "intl-tel-input/intlTelInputWithUtils" then you can access utils via intlTelInput.utils. Does that make sense?

from intl-tel-input.

Yes it makes sense, will try it and let you know if it works.

from intl-tel-input.