Search code examples
typescripteslinttypescript-eslint

Why does @typescript-eslint cache old types/files and fail to compile?

I start my Typescript application with tsc -b -w and am consistently finding that @typescript-eslint does not respond to file changes correctly. It will report invalid types/syntax where no problems exist. Sometimes, even restarting the process does not fix the problem. The only way to fix it is to make whitespace edits to the file and save again, hoping that this time things work.

Example

I just created an interface in ./types.ts:

export interface IHaveWorkspace {
  workspace: Workspace;
}

I then import and attempt to use this interface in index.tsx. However, when I attempt to access myObj.workspace, I get the following errors:

[1] src/components/Navigation/index.tsx
[1]   Line 26:29:  Unsafe assignment of an any value                @typescript-eslint/no-unsafe-assignment
[1]   Line 26:29:  Unsafe member access .workspace on an any value  @typescript-eslint/no-unsafe-member-access

Notably, it is not complaining about the interface itself. It seems unable to understand the interface's types, but it does not raise any other errors (e.g., importing the interface). Saving the files and even restarting the process have no effect. Eventually, after making whitespace changes and saving some more, the errors magically go away.

Config

FWIW...

.eslintrc.js:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'eslint-plugin-react', 'eslint-plugin-react-hooks'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
    'prettier/@typescript-eslint',
  ],
  rules: {
    'indent': ['error', 2],
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
  },
  env: {
    amd: true,
  },
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};

And tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "allowJs": true,
    "declaration": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "lib": [
      "es2015",
      "dom"
    ],
    "skipLibCheck": true,
    "rootDir": "src",
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}
Solution

  • If this is happening in VS Code (based on the comments, it seems like it is?) then it's a known issue with how VS Code's ESLint extension handles re-running lint rules on file changes: https://github.com/microsoft/vscode-eslint/issues/1774. Specifically, the extension doesn't re-compute cross-file information -such as types- when files change. The fastest way to get it to refresh its understanding is to run the Restart ESLint Server editor command in VS Code.

    If this is happening on the command-line (for other folks seeing this), make sure you're not using ESLint's --cache. ESLint's caching also doesn't recognized cross-file dependencies: https://typescript-eslint.io/troubleshooting/#can-i-use-eslints---cache-with-typescript-eslint