Exports not found when using absolute import paths based on baseUrl from tsconfig.json or jsconfig.json

[iulianraduat]

Hi,

All my exports from .tsx files are reported as not being used when I use absolute paths based on baseUrl set in tsconfig.json

How to reproduce this problem:

1. npx create-react-app my-app --template typescript
2. cd my-app && npm install eslint-plugin-import
3. define a baseUrl of "." in tsconfig.json (in "compilerOptions")
4. create a 2 folders in "src/" (name them "a" and "b")
5. create a file in each of them ("a/out.tsx" and "b/in.tsx")
6. export a function from "a/out.tsx" (fn)
7. import fn in "b/in.tsx" using an absolute path ("import {fn} from 'src/a/out';")
8. check in "a/out.tsx" if eslint-plugin-import reports "fn" as not being used
9. you can add a script in package.json for running the linter ("lint": "eslint . --ext .ts,.tsx")

eslint is configured in package.json like this:

{
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:import/typescript"
    ]
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [
            ".ts",
            ".tsx"
          ],
          "paths": [
            "."
          ]
        }
      }
    },
    "rules": {
      "import/no-unused-modules": [
        "warn",
        {
          "missingExports": true,
          "unusedExports": true,
          "src": [
            "."
          ],
          "ignoreExports": [
            "src/**/*.d.ts"
          ]
        }
      ]
    }
  },
}

Maybe I do something wrong in the way I configure eslint or eslint/eslint-plugin-import has a problem with absolute paths based on baseUrl.
Any help is highly appreciated. Thank you.

Cheers,
Iulian

[ljharb]

I'm not familiar with baseUrl, but if TS supports it we should as well.

This might need a fix here, or it might need one in tsconfig-paths.

[iulianraduat]

I think that first step should be that someone writes a test which reproduces this problem.

[johnthagen]

baseUrl defined here: https://justinnoel.dev/2019/06/18/configuring-react-absolute-imports-for-typescript/

A short tutorial on how this can be used: https://justinnoel.dev/2019/06/18/configuring-react-absolute-imports-for-typescript/

An example of a publicly viewable React project that uses absolute imports is here: https://github.com/sillsdev/TheCombine/blob/90e2e819cebfbb1a6e9f760ac305f91d6c0b250a/tsconfig.json#L22

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "downlevelIteration": true,
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ]
}

My first shot at using eslint-plugin-import resulted in a large number of Unable to resolve path to module, which I assume was due to this issue.

Config:

  "eslintConfig": {
    "extends": ["react-app", "plugin:import/recommended", "plugin:import/typescript"],
    "env": {
      "jest": true
    },
    "rules": {
      "no-undef": "off",
      "@typescript-eslint/switch-exhaustiveness-check": "warn"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "settings": {
      "import/extensions": [
        ".js",
        ".jsx",
        ".ts",
        ".tsx"
      ]
    }
  },

A full project: https://github.com/sillsdev/TheCombine/tree/sort-ts-imports

To reproduce:

$ npm install
$ npm run lint
...
  12:33  error  Unable to resolve path to module 'utilities'   import/no-unresolved

✖ 952 problems (952 errors, 0 warnings)

Output from CI run: https://github.com/sillsdev/TheCombine/runs/3976722965?check_suite_focus=true

[ljharb]

@johnthagen you also have to define https://github.com/import-js/eslint-plugin-import/blob/main/config/typescript.js#L18-L22 and include the typescript resolver.

[johnthagen]

@johnthagen you also have to define https://github.com/import-js/eslint-plugin-import/blob/main/config/typescript.js#L18-L22 and include the typescript resolver.

@ljharb Is there an example in the docs that shows how to include the typescript resolver? I couldn't find it in:

• https://github.com/import-js/eslint-plugin-import#typescript
• https://github.com/import-js/eslint-plugin-import#resolvers

[ljharb]

The typescript resolver itself's docs have those instructions: https://www.npmjs.com/package/eslint-import-resolver-typescript

[johnthagen]

@ljharb Thank you for the comment, that solved the issue. I opened #2279 to make this more discoverable for new users in the future.

[csenio]

How does this work with jsconfig.json? (When not using typescript)

[ljharb]

That's not a standard thing (just a niche convention), so I would expect that it doesn't work with it.

If someone built a custom import plugin resolver for jsconfig.json, then that should work I suppose, but unless babel and bundlers read that file, i'm not sure it'd be a good idea to rely on resolution from it.

[csenio]

Good to know. The current workaround I'm using is just adding this to my eslint config:

  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }

[JounQin]

You should use https://github.com/import-js/eslint-import-resolver-typescript instead