Cannot resolve intl-tel-input/i18n imports
I want to import country name translations. One of the API examples say:
import { fr } from "intl-tel-input/i18n";
But this import doesn't work. I created a new Node.js project (Node 20), put "type": "module" in my package.json, and ran the code above. The output:
SyntaxError: Named export 'fr' not found. The requested module 'intl-tel-input/i18n' is a CommonJS module, which may not support all module.exports as named exports.
https://codesandbox.io/p/devbox/infallible-hofstadter-mc8x28 (go to "start" in the bottom right corner of the terminal for the error)
Hi!
The translations in intl-tel-input are still exported as CommonJS modules, not as ESModules.
That's why you cannot do:
import { fr } from "intl-tel-input/i18n";
Instead, you need to import directly from the language file as default:
import fr from "intl-tel-input/i18n/fr";
const iti = intlTelInput(input, {
i18n: fr,
});
Hope this helps! 👍 (Tested with [email protected] + Vite)
I think vite makes it work there. But if you have that import in a .js file and run it with node then that import will crash as well.
// import fr from "intl-tel-input/i18n/fr";
import countryTranslations from "./countries.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
If you look at the "exports" section of package.json, you can see that importing from "intl-tel-input/i18n" points to the file build/js/i18n/index.js, which you can see is indeed an ES Module with named exports.
Or if you import from "intl-tel-input/i18n/fr", it points to the file build/js/i18n/fr/index.js which is also an ES Module with a default export.
One issue I've seen before is that some projects/environments can't seem to work with ES Modules that have the ".js" suffix - they treat all ".js" files as CommonJS, and require the ".mjs" extension to treat it as an ES Module. There must be some way to configure this?
Just released a new version which should fix this: v25.8.5. Give it a try and let me know.