Types not found for intlTelInputWithUtils

[keisha-rw]

Plugin version

v23.1.0

Steps to reproduce

1. Install v23.1.0 from npm
2. Import the default export for intlTelInputWithUtils, like so: import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
3. See the TS error saying Cannot find module 'intl-tel-input/intlTelInputWithUtils' or its corresponding type declarations.ts(2307)

Expected behaviour

There should be no typescript error when this import is used in a typescript project because it has corresponding types exported in the package.

Actual behaviour

Cannot find module 'intl-tel-input/intlTelInputWithUtils' or its corresponding type declarations.ts(2307) is thrown.

Workaround

For now, I am using declare module 'intl-tel-input/intlTelInputWithUtils'; to get around this TypeScript error, but it'd be nice to have types properly defined when using the version of the script with utils included.

Further Analysis

It looks like the exports section in the package.json file is incorrect:

"exports": {
    ".": {
      "types": "./build/js/intlTelInput.d.ts",
      "default": "./build/js/intlTelInput.js"
    },
    "./intlTelInputWithUtils": {
      "types": "./build/js/intlTelInput.d.ts",
      "default": "./build/js/intlTelInputWithUtils.js"
    },
    "./data": "./build/js/data.js",
    "./utils": "./build/js/utils.js",
    "./react": {
      "types": "./react/build/IntlTelInput.d.ts",
      "require": "./react/build/IntlTelInput.cjs",
      "default": "./react/build/IntlTelInput.js"
    },
    "./reactWithUtils": {
      "types": "./react/build/IntlTelInput.d.ts",
      "require": "./react/build/IntlTelInputWithUtils.cjs",
      "default": "./react/build/IntlTelInputWithUtils.js"
    },
    "./i18n": "./build/js/i18n/index.js",
    "./i18n/*": "./build/js/i18n/*/index.js",
    "./styles": "./build/css/intlTelInput.css",
    "./*": "./*"
  },

It looks like the types for intlTelInputWithUtils is pointing to the types of intlTelInput.d.ts, which likely isn't correct.

For what it's worth, I can import the script without the utils like this: import intlTelInput from 'intl-tel-input'; and the types are associated as I'd expect and no errors are thrown.

[jackocnr]

It looks like the types for intlTelInputWithUtils is pointing to the types of intlTelInput.d.ts, which likely isn't correct.

Actually, it is correct. That file includes types for intlTelInputWithUtils.

Can you share more information about your build system, with relevant version numbers and config files.

[moos]

Maybe similar issue with 23.1.0 reported in https://github.com/jackocnr/intl-tel-input/issues/1558#issuecomment-2195640989.

[keisha-rw]

@moos That could definitely be related, as I'm also on Node 18!

MacOS Sonoma 14.4.1 Node v18.19.0 npm 10.2.3 TypeScript 5.5.2

[keisha-rw]

Our project is a monorepo, so our base tsconfig has these compiler options:

"compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom", "dom.iterable"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",

and the project-level tsconfig where this is occurring has these:

"compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": false,

(our project-level tsconfig extends the base config)

[moos]

I tried node 16.x, same thing. The issue was with jest not supporting exports. I've updated the link above.

[jackocnr]

@keisha-rw I was able to reproduce the issue with your tsconfig settings.

The full error I got was this:

Cannot find module 'intl-tel-input/intlTelInputWithUtils' or its corresponding type declarations. There are types at '[REDACTED]/node_modules/intl-tel-input/build/js/intlTelInput.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

As per the error message, updating "moduleResolution" setting to "nodenext" fixed the issue for me (this also required updating "module" setting to "nodenext" as well). Does that work for you?

[jackocnr]

Closing due to inactivity.

[jasonhutton-sd]

Changing the tsconfig and breaking the rest of the project cannot be the end resolution of this, can it? There is definitely something wrong with the react component, can it be fixed?

[jackocnr]

@jasonhutton-sd please share which version of TypeScript you're using, as well as your tsconfig.