Unable to resolve path to module 'intl-tel-input/react'

[KalvinHom]

When running eslint, I get the following error error Unable to resolve path to module 'intl-tel-input/react'
Same error occurs when trying to run tests with jest.

I'm on intl-tel-input: 21.2.7 and React 17. I saw this previous issue, but i'm already on a later version. https://github.com/jackocnr/intl-tel-input/issues/1558

[jackocnr]

Please can you post more details about your eslint setup. What version of eslint are you using? Which eslint plugin(s) etc are you using? What's in your eslint config?

[KalvinHom]

Here's the eslint plugins being used:

"eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^8.3.0", "eslint-import-resolver-typescript": "2.7.1", "eslint-plugin-import": "2.26.0", "eslint-plugin-jest": "^26.5.3", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "^4.6.0",

[KalvinHom]

This is a monorepo, and we're using turbo for it.

here's our .eslintrc and our .tsconfig for our root and core package.

eslint:

{
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:jest/recommended",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript"
  ],
  "globals": {
    "JSX": "readonly"
  },
  "ignorePatterns": "rollup.config.js",
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["import", "jsx-a11y"],
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "project": ["tsconfig.json", "packages/*/tsconfig.json"]
      }
    },
    "react": {
      "version": "detect"
    }
  },
  "root": true,
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": true }],
    "import/extensions": "off",
    "import/namespace": ["error", { "allowComputed": true }],
    "import/no-anonymous-default-export": "off",
    "import/no-cycle": "off",
    "import/no-unresolved": "error",
    "import/order": [
      "error",
      { "alphabetize": { "order": "asc", "caseInsensitive": false }, "newlines-between": "always" }
    ],
    "import/prefer-default-export": "off",
    "no-use-before-define": "off",
    "no-underscore-dangle": "off",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "error",
    "prettier/prettier": ["error"],
    "react/jsx-closing-bracket-location": [1, "line-aligned"],
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".tsx"] }],
    "react/jsx-sort-props": [
      2,
      {
        "noSortAlphabetically": false
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "react/no-array-index-key": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "packageDir": ["./packages/core/", "./packages/cli/", "./"],
        "devDependencies": [
          "**/*.stories.{js,jsx,ts,tsx}",
          "**/*.test.{js,jsx,ts,tsx}",
          "**/test/*.{js,jsx,ts,tsx}",
          "**/tests/*.{js,jsx,ts,tsx}"
        ]
      }
    ],
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["../../../*"]
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "@typescript-eslint/explicit-module-boundary-types": ["error"]
      }
    }
  ]
}

root tsconfig

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

tsconfig in our core package

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "cypress",
    "./cypress.config.ts"
  ]
}

[KalvinHom]

@jackocnr Any idea if this is something that can be fixed on the library's end?

[jackocnr]

Does it work if you use the full import path e.g. "intl-tel-input/react/build/IntlTelInput"? Or if that also doesn't work, try adding ".js" on the end?

[KalvinHom]

It looks like importing intl-tel-input/react/build/IntlTelInput instead helps with eslint and testing, but then building gets a different error instead.

`node_modules/intl-tel-input/react/build/IntlTelInput.d.ts' is not a module.

Using intel-tel-input/react i was able to get jest to understand it by adding moduleNameMapper: { "intl-tel-input/react": "/node_modules/intl-tel-input/react/build/IntlTelInput" } to the jest.config.json,

but I haven't been able to get a similar concept to work for eslint.

[jackocnr]

This seems to be a known issue with eslint-plugin-import, and it looks like there's a simple workaround for now - can you try that and see if it works for you? Obviously updating the ignore bit to apply to this package.

[jackocnr]

I see in your eslint config, you currently have the rule:

"import/no-unresolved": "error"

If you tweak this to the following then it should fix the issue for now:

"import/no-unresolved": ["error", { "ignore": ["intl-tel-input"] }]

The problem is that the eslint-plugin-import package doesn't yet support package.json exports which we are using.