utilsScript fails to load the utils from CDN in Next.js app

[erisleci]

The new version seems to break the ability to import the util scripts from CDN on a Next app.

Plugin version

v23.0.4

Steps to reproduce

1. Install intl-tel-input on a Next app (v14.2.2)

2. Render the IntlTelInput react component and pass utilsScript inside initOptions param: initOptions={{ utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.4/js/intlTelInput.min.js", }}

3. Check browser console

Expected behaviour

Util scripts load

Actual behaviour

Util scripts fail to load and it shows this error

Initialisation options

utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.4/js/intlTelInput.min.js"

[jackocnr]

The utilsScript value is incorrect - it is pointing to the plugin script - instead it needs to point to the utils script e.g. https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.4/js/utils.js

[carlssonemil]

We're getting a similar issue with the recent changes to the utilsScript option. Webpack throws a warning for the dynamic import of the script URL with the following message:

Critical dependency: the request of a dependency is an expression

We use the exact URL in your comment above 🤔

[erisleci]

The utilsScript value is incorrect - it is pointing to the plugin script - instead it needs to point to the utils script e.g. https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.4/js/utils.js

Ah yeah my bad :D. Still though, same error is showing up

[jackocnr]

@erisleci can you reproduce this issue in a codepen? Here is a React pen you can fork if that helps.

@carlssonemil can you create a new issue for that, and give more details about what tech you're using (with versions), and any relevant config files etc please.

[jackocnr]

I've just done a quick test and I can reproduce this error. Clicking through to see which line is causing the error, I see that webpack is replacing the dynamic import call with __webpack_require__(...) so it's trying to do something clever, but actually breaking the import. I wonder if there's a next/webpack configuration setting to tell webpack to leave dynamic imports untouched, ideally specifically within this library.

[jackocnr]

If anyone has any experience with / thoughts on the above then please do share, but otherwise, you can just do import IntlTelInput from "intl-tel-input/reactWithUtils" instead, which comes pre-bundled with the utils. The downside is that the utils script is aprx 260kb (unzipped), but I figure if you're already lazy loading the plugin chunk then that doesn't really matter. What do people think?

[BRAiNCHiLD95]

@jackocnr the following pre-bundled version does work -

import IntlTelInput from "intl-tel-input/reactWithUtils"

but it also shows a similar webpack warning as @carlssonemil mentioned, just with a different pathname. Just to confirm this, I tried 2 different imports in 2 components -

import IntlTelInput from "intl-tel-input/react"

WARNING in ./node_modules/intl-tel-input/react/build/IntlTelInput.js 1:33234-33243
Critical dependency: the request of a dependency is an expression

import IntlTelInput from "intl-tel-input/reactWithUtils"

WARNING in ./node_modules/intl-tel-input/react/build/IntlTelInputWithUtils.js 1:33267-33276
Critical dependency: the request of a dependency is an expression

[jackocnr]

@BRAiNCHiLD95 that's strange, I can't reproduce that issue with Next v14.1.4. What version of Next are you using? And are you still using the utilsScript option? (you don't need to if you're using the reactWithUtils bundle)

[BRAiNCHiLD95]

Sorry I forgot to mention that - I'm actually using this with React 18.3.1 - came across this since it broke on our staging servers (we were using the latest cdn link, but not the latest package).

Found this issue, updated to the latest, and got these webpack warnings.

Funnily enough, the same code works just fine when used in a codepen.

But webpack does not like the dynamic import(<utilsscript>).then(), I believe.

Update:

And are you still using the utilsScript option? (you don't need to if you're using the reactWithUtils bundle)

Confirmed that the webpack warnings show up even if utilsScript is not passed to the config object.

[jackocnr]

@BRAiNCHiLD95 that should now be fixed in v23.0.5 - can you confirm?

@erisleci I'm hoping v23.0.5 fixes your issue as well - can you confirm?

[BRAiNCHiLD95]

@jackocnr confirmed - this fixed both the issues!

v23.0.5 works with both -

import IntlTelInput from "intl-tel-input/react"

const utilsScriptURL = https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.0.4/js/utils.js

and

import IntlTelInput from "intl-tel-input/reactWithUtils"

Not sure if the CDN link needs to be updated to match the version, but it definitely works with the 23.0.4 links

[erisleci]

@jackocnr Yes, the issue is fixed. Thank you @BRAiNCHiLD95 https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.5/build/js/utils.js this is the new link it seems

[BRAiNCHiLD95]

@jackocnr Yes, the issue is fixed. Thank you @BRAiNCHiLD95 https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.5/build/js/utils.js this is the new link it seems

Ahh that version link didn't work some time ago, anyhoo looks like it's all back up and running!