Unable to resolve path to module eslint(import/no-unresolved) when using "paths" in tsconfig.json

[pjmvp]

I have a simple project in a ClientApp/ folder.
In it, I have tsconfig.json, .eslintrc, package.json and a /src/components folder containing my ts/tsx files.
I want to use the "paths" config in tsconfig so that I can simplify/shorten my imports.

However, I always get the same "import/no-unresolved" error message: Unable to resolve path to module 'common'.eslint(import/no-unresolved)

Any idea on whether this is a bug or I'm doing something wrong?

Sample Project:

sample-unresolved.zip

Sample Code:

tsconfig.json:

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

.eslintrc

{
	"root": true,
	"extends": [
	  "eslint:recommended",
	  "plugin:@typescript-eslint/eslint-recommended",
	  "plugin:@typescript-eslint/recommended",
	  "plugin:import/errors",
	  "plugin:import/typescript"
	],
	"parserOptions": {
	  "project": "tsconfig.json"
	},
	"settings": {
	  "import/resolver": {
		"typescript": {
		     "project": "tsconfig.json"
		}
	  }
	}
  }

packages.json

...
"devDependencies": {
    // ... simplified
    "@typescript-eslint/eslint-plugin": "4.20.0",
    "@typescript-eslint/parser": "4.20.0",
    "eslint": "7.23.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-import-resolver-typescript": "2.4.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jest": "24.3.2",
    "eslint-plugin-prettier": "3.3.1",
    "eslint-plugin-react": "7.23.1",
    "eslint-plugin-react-hooks": "4.2.0"
  },

App.tsx (this is the problematic import)

**import { MyComponent } from 'common'**
// ...

In my VSCode settings file for that project:

        // ...
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"typescript",
		"typescriptreact"
	],
	"eslint.workingDirectories": [
		{
			"directory": "ClientApp",
			"changeProcessCWD": true,
			"mode": "auto"
		}
	],
	"editor.codeActionsOnSave": { "source.fixAll.eslint": true },

[JounQin]

We need online runnable reproduction, use a git repo instead please.

[pjmvp]

@JounQin alright:
https://github.com/pjmvp/sample-unresolved

npm/yarn install
in ClientApp

[JounQin]

Should be related to tsconfig-paths

You can add a baseUrl as workaround temporarily.

https://amber-otter-fn3c6ib1.ws-us03.gitpod.io/

[pjmvp]

Yep, that did it. Thank you, @JounQin.

Adding "baseUrl": "." under the tsconfig file's "compilerOptions" object did it for me.
It's also important to have:

	"parserOptions": {
		"project": "tsconfig.json"
	},
	"settings": {
		"import/resolver": {
			"typescript": {
				"project": "tsconfig.json"
			}
		}
	},

in the .eslintrc file.

(Your gitpod.io link doesn't work for me, but the fix is simple enough.)

[MaxDNG]

If anyone else encounters the same issue, in my case I'm using a .eslintrc.js file and simply having project: 'tsconfig.json' did not work. I had to switch to project: path.resolve(__dirname, 'tsconfig.json') for it to work.

ie:

settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: path.resolve(__dirname, 'tsconfig.json'),
      },
    },
  },