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)