vscode-eslint not working with eslint-import-resolver-typescript@2.0.0

[MicrochipQ]

vscode-eslint works with eslint-import-resolver-typescript@1.1.1, but does not work with eslint-import-resolver-typescript@2.0.0

ESLint CLI works fine.

Steps to reproduction:

1. Clone repo
2. Install dependencies - yarn install
3. Replace paths in this.code-workspace with yours (ex. /Users/microchipq/wa-eslint-import-error with /home/USER/wa-eslint-import-error)
4. Open VS Code
5. Open this.code-workspace as workspace
6. Go to one(workspace folder)/src/index.ts
7. Wait while loading JS/TS language features
8. Go to two(workspace folder)/src/index.ts
9. Finally, we see Unable to resolve path to module '~/module'. eslint (import/no-unresolved)
10. If you restart VS Code and open src/index.ts, first in the workspace two, and then in one, then an error may occur in the one workspace

Repo: https://github.com/MicrochipQ/wa-eslint-import-error

vscode-eslint version: 2.1.3

VS Code:

Version: 1.44.1
Commit: a9f8623ec050e5f0b44cc8ce8204a1455884749f
Date: 2020-04-11T01:47:00.296Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.3.0

[dbaeumer]

@MicrochipQ since you run eslint in the terminal in certain directories (you do a cd into one and two ) you need to let the ESLint extension know that this are your working directories since the import resolver is cwd sensitive. See the setting eslint.workingDirectories.

Please ping if this doesn't help fixing the issue.

[MicrochipQ]

@dbaeumer I just tried it now

"eslint.workingDirectories": [{ "mode": "auto" }]

"eslint.workingDirectories": [{ "mode": "location" }]

"eslint.workingDirectories": ["./packages/one", "./packages/two"]

But none of them worked

[MicrochipQ]

@dbaeumer No more solutions to this problem?

[dbaeumer]

Actually this is very wired. I check the extension code and it correctly sets the cwd to either one or two. I personally thing that the ESLint typescript plugin keeps some state between the two runs hence resulting in the second file you open to fail. It somehow tries to resolve everything relative to the first open file.

[dbaeumer]

All I can suggest for now to use relative imports ./module since they are independent of this or to disable the import rule. TypeScript checks this anyways.

[MicrochipQ]

In my real project without aliases, relative hell happens

[MicrochipQ]

Actually this is very wired. I check the extension code and it correctly sets the cwd to either one or two. I personally thing that the ESLint typescript plugin keeps some state between the two runs hence resulting in the second file you open to fail. It somehow tries to resolve everything relative to the first open file.

But why is the previous version of eslint-import-resolver-typescript working fine?

[dbaeumer]

I think it is a combination of may things:

• newer version of the eslint-import-resolver-typescript
• lerna linking setup.

If I remove the lerna linking setup and install the npm packages locally to one and two everything works fine.

May be the new version of eslint-import-resolver-typescript considers its install location as a working directory start.

[dbaeumer]

[MicrochipQ]

I removed Lerna but still does not work

[MicrochipQ]

Yarn Workspaces linking node_modules without Lerna

[MicrochipQ]

But if I disable Yarn Workspaces then it works. However I cannot give up Yarn Workspaces in my project, I don't want to duplicate dependencies between several packages

[dbaeumer]

Sorry, you are correct. It was yarn workspace not Lerna.

Since everything worked before you move to eslint-import-resolver-typescript@2.0.0 and you have a very nice minimal test case have you filed the bug against the owner of eslint-import-resolver-typescript. At the end it looks like they changed something.

[MicrochipQ]

Yeah, but how can I change cwd in the vscode-eslint extension for each package, without reloading VS Code?

[MicrochipQ]

When I use Yarn Workspaces, vscode-eslint loads ESLint from the root node_modules, if I do not use Workspaces, it loads the ESLint binary from each node_modules package, and therefore cwd ESLint is different for each package, and I want to try it even with Yarn Workspaces

[MicrochipQ]

And if I open this project in WebStorm, ESLint works fine

[dbaeumer]

Yeah, but how can I change cwd in the vscode-eslint extension for each package, without reloading VS Code?

The ESLint extension does this automatically for every working directory.

And if I open this project in WebStorm, ESLint works fine

To my knowledge WebStorm runs a new process for every validation. You can to that as well in VS Code using tasks and a task runner that supports watches (like gulp). However this is not very battery friendly.

I think that the underlying problem here is eslint-import-resolver-typescript@2.0.0 which might cache something based on the first load. The problem is that with yarn workspaces you actually share the binary and all global caches will only exist once.

[dbaeumer]

I tested a little bit more and I still think this is a problem with the eslint-import-resolver-typescript@2.0.0 since it doesn't work if you run it from a different directory either. I your example (the initial commit) change the parser options in eslintrc file to

  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "packages/one/tsconfig.json",
    "tsconfigRootDir": "."
  }

an run the eslint in the terminal from the workspace folder. You get

dirkb:~/Projects/../wa-eslint-import-error [:91ed25e|✚ 1] $ ./node_modules/.bin/eslint packages/one/src/index.ts

/home/dirkb/Projects/mseng/VSCode/Playgrounds/bugs/wa-eslint-import-error/packages/one/src/index.ts
  1:24  error    Missing file extension for "~/somemodule"        import/extensions
  1:24  error    Unable to resolve path to module '~/somemodule'  import/no-unresolved
  3:1   warning  Unexpected console statement                     no-console
  4:1   warning  Unexpected console statement                     no-console

✖ 4 problems (2 errors, 2 warnings)

So the fact that these modules are linked make it even fail in the terminal. I really suggest you ask the owner of eslint-import-resolver-typescript@2.0.0 why this is the case.

[dbaeumer]

The actual problem is here since the extension does cache a mapper but only once for the current cwd which results in problem when reused from different directories (https://github.com/alexgorbatchev/eslint-import-resolver-typescript/blob/master/src/index.ts#L148)

[dbaeumer]

I tried to play with the directory setting of the eslint-import-resolver-typescript plugin but that makes the VM crash

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1a93942]
    1: StubFrame [pc: 0x1aeddb8]
Security context: 0x14ff7da9a2f1 <JSObject>#0#
    2: resolve [0x27835d180769] [/home/dirkb/Projects/mseng/VSCode/Playgrounds/bugs/wa-eslint-import-error/node_modules/eslint-import-resolver-typescript/lib/cjs.js:24] [bytecode=0xe1cf9319b61 offset=2](this=0x2db7eedb3d91 <Object map = 0x5e328358f19>#1#,0x07148c40a4d1 <String[8]: ~/module>,0x2ecff80d2b29 <String[99]: /home/dirkb/Projects/mseng/VSCode/Playgrounds/bugs/wa-eslint-import-error/packages/two/src/index.ts>,0x341133f2cca1 <Object map = 0x10aec7be91d9>#2#)

May be you have more luck with the setting since this seems to be a way to let the import resolve know which directories to look into.

[dbaeumer]

One setup that seems to work is the following eslintrc with no eslint.workingDirectory setting

{
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "airbnb-base",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "packages/one/tsconfig.json",
    "tsconfigRootDir": "."
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "ts": "never"
      }
    ],
    "prettier/prettier": ["error"]
  },
  "settings": {
    "import/resolver": {
      "typescript": {
        "directory": [
          "packages/one",
          "packages/two"
        ]
      }
    }
  }
}

[MicrochipQ]

I cannot send this issue to the owner of eslint-import-resolver-typescript, because it cannot be reproduced correctly without VS Code. Any ideas for reproducing it from the CLI without changing .eslintrc?

[MicrochipQ]

I tested a little bit more and I still think this is a problem with the eslint-import-resolver-typescript@2.0.0 since it doesn't work if you run it from a different directory either. I your example (the initial commit) change the parser options in eslintrc file to

  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "packages/one/tsconfig.json",
    "tsconfigRootDir": "."
  }

an run the eslint in the terminal from the workspace folder. You get

dirkb:~/Projects/../wa-eslint-import-error [:91ed25e|✚ 1] $ ./node_modules/.bin/eslint packages/one/src/index.ts

/home/dirkb/Projects/mseng/VSCode/Playgrounds/bugs/wa-eslint-import-error/packages/one/src/index.ts
  1:24  error    Missing file extension for "~/somemodule"        import/extensions
  1:24  error    Unable to resolve path to module '~/somemodule'  import/no-unresolved
  3:1   warning  Unexpected console statement                     no-console
  4:1   warning  Unexpected console statement                     no-console

✖ 4 problems (2 errors, 2 warnings)

So the fact that these modules are linked make it even fail in the terminal. I really suggest you ask the owner of eslint-import-resolver-typescript@2.0.0 why this is the case.

With this change, it reproduces even on v1.1.1, but the problem should only be in v2.0.0

[thomaslaich]

I have the same problem. Had to revert to v1.1.1 also.