utilsScript fails to load the utils from CDN in Next.js app about intl-tel-input HOT 13 CLOSED

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.

from intl-tel-input.

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 🤔

from intl-tel-input.

@jackocnr Yes, the issue is fixed. Thank you
@BRAiNCHiLD95 https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js this is the new link it seems

from intl-tel-input.

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

from intl-tel-input.

@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.

from intl-tel-input.

@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

from intl-tel-input.

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

from intl-tel-input.

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?

from intl-tel-input.

@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

from intl-tel-input.

@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)

from intl-tel-input.

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.

from intl-tel-input.

@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?

from intl-tel-input.

@jackocnr Yes, the issue is fixed. Thank you
@BRAiNCHiLD95 https://cdn.jsdelivr.net/npm/[email protected]/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!

from intl-tel-input.