intl-tel-input icon indicating copy to clipboard operation
intl-tel-input copied to clipboard

Cannot resolve intl-tel-input/i18n imports

Open tomherni opened this issue 8 months ago • 2 comments

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)

tomherni avatar Apr 17 '25 10:04 tomherni

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)

fbrambila avatar Apr 17 '25 21:04 fbrambila

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

tomherni avatar Apr 17 '25 21:04 tomherni

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?

jackocnr avatar Aug 22 '25 13:08 jackocnr

Just released a new version which should fix this: v25.8.5. Give it a try and let me know.

jackocnr avatar Sep 02 '25 22:09 jackocnr