Not able to detect .d.ts file

[rjritik1137]

I am having a react typescript project with eslint and typescript setup with webpack.
I created one declaration.d.ts file having this code

declare module 'local-react' {
  export type ReactFCWithChildren<P> = React.FC<React.PropsWithChildren<P>>
}

When I am importing it. I am getting a eslint error
Unable to resolve path to module 'local-react'.eslint[import/no-unresolved](https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/no-unresolved.md) module "local-react"

I am not sure why this is happening and what's the issue, I think typescript is able to resolve this that's why I am not getting the typescript error, because my include file in src consist of "src/**/*", but what about eslint?

This is my ts config,

{
  "compilerOptions": {
    "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ /* Type declaration files to be included in compilation. */,
    "lib": [
      "DOM",
      "ESNext"
    ] /* Specify library files to be included in the compilation. */,
    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react' or 'react-jsx'. */,
    "noEmit": true /* Do not emit outputs. */,
    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
    "resolveJsonModule": true,
    // "allowJs": true /* Allow javascript files to be compiled. Useful when migrating JS to TS */,
    // "checkJs": true /* Report errors in .js files. Works in tandem with allowJs. */,
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  "include": ["src/**/*"]
}

This is my eslint config file

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsx-a11y/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error'],
    '@typescript-eslint/no-var-requires': 'off',
    'react/prop-types': 'off',
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
}

[ljharb]

Have you tried using the TS import resolver?

[rjritik1137]

@ljharb What is it?

[rjritik1137]

@ljharb First of all I want to why this is happening. Do you have any idea on it?

[ljharb]

https://www.npmjs.com/package/eslint-import-resolver-typescript - I see that you're extending our TS config tho https://github.com/import-js/eslint-plugin-import#typescript so as long as that package is installed you should be good.

[ljharb]

cc @JounQin who may be able to help

[rjritik1137]

@ljharb Just to make sure, these are the plugins and dev dependencies that I have installed, am I missing something?

  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/preset-react": "^7.22.3",
    "@babel/preset-typescript": "^7.21.5",
    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.2.4",
    "@typescript-eslint/eslint-plugin": "^5.59.8",
    "@typescript-eslint/parser": "^5.59.8",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.8.1",
    "eslint": "^8.41.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "html-webpack-plugin": "^5.5.1",
    "prettier": "^2.8.8",
    "style-loader": "^3.3.3",
    "typescript": "^5.0.4",
    "typescript-plugin-css-modules": "^5.0.1",
    "webpack": "^5.84.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.15.0",
    "webpack-merge": "^5.9.0"
  }

[ljharb]

yes, you need eslint-import-resolver-typescript.

[rjritik1137]

@ljharb Ok will try it,
But how this is helping? What is the issue right now can we tell me? Why eslint is not able to detect .d.ts files, but it's able to detect javascript and typescript files?

[ljharb]

d.ts files are typescript files. They can't be resolved by default because .d.ts isn't an extension, .ts is. The TS resolver specifically tells this eslint plugin how to find them. If you read our readme under "TypeScript", it tells you to install this.

[rjritik1137]

Got it, then what was the use of "@typescript-eslint/eslint-plugin", was't it to provide the same thing?.

[ljharb]

That provides the parser - which is different from the resolver.

[rjritik1137]

@ljharb I tried with "eslint-import-resolver-typescript"
and added "import/resolver", still seems like it's not resolving the issue.

  settings: {
    react: {
      version: 'detect',
    },
 'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },
  },

[ljharb]

The settings are already in import/typescript so you just need to install the package. If it's still not working, then there's clearly something wrong, I'm just not sure what it is.

[rjritik1137]

Yeah, I have installed the package. Looks like something is not correct.

[ap0nia]

I'm having this issue as well. This is my ESLint config.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: ['./tsconfig.json'],
    sourceType: 'module',
  },
  plugins: ['import', '@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'prettier',
  ],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  ignorePatterns: ['*.config.*', '*.cjs'],
}

It fails to work with with a simple directory setup like this:

src
├── index.ts
└── app.d.ts

// src/index.ts
import {} from 'app'

// src/app.d.ts
declare module "app" {}

I "declare" that a module exists in an ambient d.ts file, and then I attempt to import it in a regular .ts file. It works in TypeScript, and "going to definition" of "app" takes me back to the app.d.ts file where I declared it. But the (TypeScript) ESLint resolver doesn't seem to pick this up.

[JounQin]

It is indeed a missing feature from eslint-import-resolver-typescript, @ljharb you can transfer it to the correct repository. We may need an option for user to declare which .d.ts files to be checked, but it still may meet similar problem like import-js/eslint-plugin-import#1479