Cache doesn't bust when .eslintrc changes

[swrobel]

If I have a failure, then change eslintrc to change the rule, then run eslint, it comes up clean, however webpack keeps complaining until I rm node_modules/.cache/eslint-loader/

[RiskySignal]

I did meet this problem, and it took me two days to find this problem!

[langri-sha]

Related to #190.

[mati-o]

I have the same issue but I can suggest a temp workaround. I did some digging in the source to find the following code that builds the cacheIdentifier from it's pkg.version and the eslint's version

var config = assign(
    // loader defaults
    {
      formatter: formatter,
      cacheIdentifier: JSON.stringify({
        "eslint-loader": pkg.version,
        eslint: require(userEslintPath || "eslint").version,
      }),
      eslintPath: "eslint",
    },
    userOptions
  )

Apparently, we can provide our own cacheIdentifier via the loader options. So I was thinking, why not providing my own cacheIdentifier to bust the cache?

I have used the last modified time of my .eslintrc file. I know it's probably not the best way to identify it and I am pretty sure I'll remove it soon once I stabilize my config, but it helps to workaround this issue. I am providing an excerpt from my webpack (4) configuration file. time stamps can change without actual content modification though, but it's okay for me now.

EDIT: See below for a better hashing

// Get the file last modified time to use as a cache identifier
const eslintCacheIdentifier = JSON.stringify(fs.statSync(PATH_TO_ESLINT_RC).mtimeMs);

module.exports = {
  module: {
    // ...
    rules: [
      // ...
      {
        test: /\.(js|jsx)$/,
        enforce: 'pre',
        use: {
          loader: 'eslint-loader',
          options: {
            cache: true,
            cacheIdentifer: eslintCacheIdentifier,
          },
        },
      },
      // ...
    ],
  },
}
}

If someone will suggest a better cache identifier or a different suggestion on how to fix this, I may PR. I am wondering, maybe the solution would be to hash the eslintrc and use it as the cacheIdentifier.

EDIT: A safer cacheIdentifier

As I have mentioned above, the last modified time is not a strong cacheIdentifier. Therefore if you are using a single eslintrc file, I would suggest getting it's object's hash. Thus, even if you modify it without affecting any of the rules (like when adding a comment or reformatting it), the hash won't change.

We'll use object-hash for this, which is already used under the hood for the eslint output (per file). For clarity, we'll add a dependency for it npm i -D object-hash and then modify our code accordingly

+ const objectHash = require('object-hash');

- // Get the file last modified time to use as a cache identifier
- const eslintCacheIdentifier = JSON.stringify(fs.statSync(PATH_TO_ESLINT_RC).mtimeMs);
+ // Get the object hash for our single eslintrc to use as a cache identifier
+ const eslintCacheIdentifier = objectHash(require(PATH_TO_ESLINT_RC));

[macouella]

Encountered this problem today! @mati-o's comment really helped!

[jenssogaard]

This really messed my morning up 😆 I guess a manual procedure would be:
rm -rf node_modules/.cache/eslint-loader

[thasmo]

FYI, this also is the case using prettier via eslint-plugin-prettier after changing the configuration in the .prettierrc file; the change in the .prettierrc file does not invalidate the eslint-loader cache.

[ricardogobbosouza]

Hi @swrobel
Try to use eslint-webpack-plugin
We are building this plugin to have more control than the loader.
With this plugin the cache used is directly from eslint

[ksjogo]

Just did run into this. Hashing the eslintrc config might no be enough if that config is extending other configs (we are having a company wide eslint-config-*).

[ricardogobbosouza]

Please use eslint-webpack-plugin. eslint-loader will be deprecated.