EXTEND_ESLINT=true - "Failed to compile"

I didn’t like seeing “no-unused-vars” warnings in browser console, so I found about the EXTEND_ESLINT=true feature and tried to configure it. The feature does indeed seem to work, only not the way I expected.

Now I’m getting the “Failed to compile” error straight away:

./src/registerServiceWorker.js
  Line 47:11:  Replace `registration` with `(registration)`  prettier/prettier
  Line 68:12:  Replace `error` with `(error)`                prettier/prettier
  Line 76:10:  Replace `(response` with `((response)`        prettier/prettier
  Line 80:44:  Replace `registration` with `(registration)`  prettier/prettier
  Line 97:40:  Replace `registration` with `(registration)`  prettier/prettier

Search for the keywords to learn more about each error.

I have eslint configured with .eslintrc.js file. Here is its content:

module.exports = {
  root: true,
  extends: ['react-app', 'prettier', 'prettier/flowtype', 'prettier/react'],
  plugins: ['import', 'flowtype', 'jsx-a11y', 'react', 'react-hooks', 'prettier', 'emotion'],
  rules: {
    'emotion/jsx-import': 'error',
    'prettier/prettier': 'warn',
    'react/no-did-mount-set-state': 0,
    'no-unused-vars': 0,
    'dot-notation': 0,
    'no-new-func': 0,
    'no-alert': 0,
  },
  globals: {
    Intl: 'readonly',
  }
};

In the editor (VS Code) this configuration is working OK. All the rules are honored. I also tried to create similar config using eslintConfig section in package.json file, but it didn’t seem to work either.

UPDATE: It looks like that number of errors (per file) is what matters. If I fix few of the prettier issues (so that number of issues is less than 5), it no longer fails to compile, and just displays remaining issues as warnings. It is interesting though that changing from ‘warn’ to ‘error’ or to 0 does not seem to have any effect for ‘prettier/prettier’ rule. Also changing from 0 to 1 for ‘no-unused-vars’ has no effect… Maybe the configuration got cached somehow?..

UPDATE 2: If I set cache option to false in node_modules/react-scripts/config/webpack.config.js, as per https://stackoverflow.com/a/61463282, I’m finally getting some sensible behaviour: changes in .eslintrc.js file result in different errors dispayed in browser console (or “Failed to compile”). Still no hot reloading though: I need to restart the web server. Now the remaining question is: with the default setting cache: true, where the cache is stored and how long does it last?

[aximusnl]

The cache is stored under node_modules/.cache/eslint-loader

First stop the server, then delete the cache, then start the server. You need to do this every time you make changes to the eslint configuration.

[k-funk]

Please keep this issue open. Just spent the last few hours trying to:

1. turn off eslint in CRA in favor of using my own npm run lint, finding out you can’t
2. Finding out about the undocumented EXTEND_ESLINT=true option
3. then running into this caching issue, wondering why CRA wasn’t recognizing my changes to my .eslintrc.

All with the goal of trying to provide more rules to my app in a transitional way. I have never wanted to eject CRA so badly.