Cannot import "intl-tel-input/i18n/" in React project

[estefaniakleinturijobs]

Hello, I haven't found anywere how to make this work, can you please check if it is a bug? Thank you

Plugin version

v23.8.0

Steps to reproduce

1. Install intl-tel-input in React 16.14.2 project with typescript ~4.9.5

2. Try to import {es} from "intl-tel-input/i18n/es";

3. This is my component config: <IntlTelInput onChangeNumber={setPhoneNumber} onChangeValidity={setisValidPhone} onChangeErrorCode={setErrorCodePhone} initOptions={{ initialCountry: "es", utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.8.0/build/js/utils.js", autoPlaceholder: "polite", fixDropdownWidth: true, formatAsYouType: true, showFlags: false, separateDialCode: true, i18n: es }} />

Expected behaviour

To configure spanish in i18n in the phone input

Actual behaviour

Server Error SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack

.../node_modules/intl-tel-input/build/js/i18n/es/index.js (2) ### Initialisation options import IntlTelInput from "intl-tel-input/react"; import "intl-tel-input/styles"; import 'intl-tel-input/build/css/intlTelInput.css'; import {es} from "intl-tel-input/i18n/es";

[jackocnr]

import {es} from "intl-tel-input/i18n/es";

As per the internationalisation demo page, the correct syntax is import es from "intl-tel-input/i18n/es";

[estefaniakleinturijobs]

Hello! Thank you for the response, it doesn't work either, the problem is that it doesn´t find the module

I also tried import es from "intl-tel-input/build/js/i18n/es" but doesn't work either

[jackocnr]

Can you share your tsconfig? We had a similar issue before and the fix was a tweak in the tsconfig.

[estefaniakleinturijobs]

Yes sure, tsconfig.base.json has

{ "compileOnSave": false, "compilerOptions": { "rootDir": ".", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es5", "module": "esnext", "lib": ["dom", "dom.iterable", "esnext"], "skipLibCheck": true, "skipDefaultLibCheck": true, "baseUrl": ".", "paths": { "@app/": ["packages/mobile/"], "@store": ["packages/store/src/index.ts"], "@ui": ["packages/shared/ui/src/index.ts"], "@ui-configs/": ["packages/shared/ui/src/lib/"], "@web/": ["packages/website/"] } }, "exclude": ["node_modules", "tmp"] }

I tried changing as the issue you sent me and also declaring the module in a d.ts file:

{ "compileOnSave": false, "compilerOptions": { "rootDir": ".", "sourceMap": true, "declaration": false, "moduleResolution": "nodenext", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es5", "module": "nodenext", "lib": ["dom", "dom.iterable", "esnext"], "skipLibCheck": true, "skipDefaultLibCheck": true, "baseUrl": ".", "paths": { "@app/": ["packages/mobile/"], "@store": ["packages/store/src/index.ts"], "@ui": ["packages/shared/ui/src/index.ts"], "@ui-configs/": ["packages/shared/ui/src/lib/"], "@web/": ["packages/website/"] } }, "exclude": ["node_modules", "tmp"] }

it recognises the module but got an error too

SyntaxError: Unexpected token 'export' error - \node_modules\intl-tel-input\build\js\i18n\index.js:2 export { default as ar, countryTranslations as arCountryTranslations, interfaceTranslations as arInterfaceTranslations } from "./ar";

[jackocnr]

I tried changing as the issue you sent me

This change looks good 👍

and also declaring the module in a d.ts file

I don't understand this bit - what exactly do you mean? Maybe undo this bit?

import es from "intl-tel-input/i18n"

As before, this should be import es from "intl-tel-input/i18n/es";

[estefaniakleinturijobs]

Hello, it doesn't work either, as I showed you before, declaring the module in a d.ts file recognises the module but doesn't work as expected, I don't know what else to try

warn - ../../node_modules/next-i18next/dist/commonjs/serverSideTranslations.js Critical dependency: the request of a dependency is an expression \node_modules\intl-tel-input\build\js\i18n\es\index.js:2 import countryTranslations from "./countries.js"; ^^^^^^.

[jackocnr]

declaring the module in a d.ts

I don't know what you mean by this. Can you please explain in detail exactly what you mean by this? What exactly are you declaring as a module, and how? Provide as much detail as possible e.g. whatever the contents of this module is?

[jackocnr]

It may also help if you update Typescript to the latest version.

[ibarral]

Hello! I have the same problem, VS Code says that it lacks the type definitions.

I also tried this: https://github.com/jackocnr/intl-tel-input/issues/1678#issuecomment-2218334828 with no luck :(

[jackocnr]

@ibarral what version of typescript are you on? And can you post your tsconfig? As well as the exact error message you are receiving, in full. Thanks.

[ibarral]

@jackocnr I have TypeScript v4.9.5.

This is my tsconfig:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client", "vite-plugin-pwa/react", "./vite-env"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@stores/*": ["./src/stores/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@utils/*": ["./src/utils/*"],
      "@typesDef/*": ["./src/types/*"],
      "@helpers/*": ["./src/helpers/*"],
      "@schemaValidators/*": ["./src/schemaValidators/*"],
      "test-utils": ["./utils/test-utils"],
    },
  },
  "include": ["src"],
}

Thanks!

[jackocnr]

Thanks. And you have tried upgrading to the latest version of typescript? And changing both "module" and "moduleResolution" to "nodenext"?

[ibarral]

I have tried to change both "module" and "moduleResolution" to "nodenext" but it didn't work.

Our app is still not compatible with TS 5, so we cannot upgrade :(

[jackocnr]

@estefaniakleinturijobs I see you're using NextJS - when I google the latest error message you're getting e.g. "NextJS Critical dependency: the request of a dependency is an expression" there are lots of ideas of how to solve this, but one that jumps out at me is that it can happen when you try to import a lib into a server component - is that what you're doing here? IntlTelInput should only be imported into a client component. (Or alternatively, lots of people mention a next config setting called serverComponentsExternalPackages which you could try)

[jackocnr]

Btw I realised it's not the typescript version, as I have it working fine with with typescript v4.9.5

[jackocnr]

Sorry @ibarral, I just realised that we actually don't provide type definitions for the translation files yet. So if you're trying to import a translation file e.g. import es from "intl-tel-input/i18n/es"; and you're getting the typescript error "Could not find a declaration file for module 'intl-tel-input/i18n/es'", then the solution for now is just to add the ts-ignore comment before that line e.g.

// @ts-ignore
import es from "intl-tel-input/i18n/es";

[ibarral]

ok thanks @jackocnr !

[estefaniakleinturijobs]

Hello! As soon as I have time to return to this task I will try the 2 options you said. Thank you! Greetings

[jackocnr]

I've just released v23.9.0 which includes type declarations for translations. (so the ts-ignore comment should no longer be necessary)

[ibarral]

@jackocnr i've noticed that you have Include all translation types on v23.9.0.

I removed the// @ts-ignorebut it's still not working... I have to do anything else?

[jackocnr]

Oops I forgot to update package.json. I've just released v23.9.2 to fix this - does that work for you?

[ibarral]

It still now working :(

[jackocnr]

Hmm the problem seems to be the module name in the types declaration file - it is being generated as:

declare module "intl-tel-input/i18n/es/index"

When ideally it would be:

declare module "intl-tel-input/i18n/es"

If anyone is familiar with typescript type declaration files, and knows how to avoid this added "index" on the module name, then please do say!

But for now, the easy workaround is to add "index" to the import path e.g.

import es from "intl-tel-input/i18n/es/index";

@ibarral does that work for you? (must be used with v23.9.2 of the plugin)

[jackocnr]

Ok I've added a fix in v23.9.3, so you shouldn't need the extra "index" bit now, so this should work as expected:

import es from "intl-tel-input/i18n/es";

Or alternatively,

import { es } from "intl-tel-input/i18n";

@ibarral does that work for you? 🤞

[ibarral]

@jackocnr it works ok now, thank you very much!! :)

[jackocnr]

@estefaniakleinturijobs any luck with this? Have you tried v23.9.3?

Btw I have actually changed my mind, and now think the best syntax to use to import a locale is the following:

import { es } from "intl-tel-input/i18n";

This way you can import as many locales as you want in the same line e.g.

import { es, fr, de } from "intl-tel-input/i18n";

And this should now be working well with TS types as well.

[jackocnr]

Closing due to inactivity.