EXTEND_ESLINT=true - "Failed to compile"

[StasD]

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?

[poozhu]

try remove node_modules and re-install

[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.

[croraf]

@StasD You should close this in favor of #9085

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[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.

[aximusnl]

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.

I completely agree. And I feel your pain.

I went as far as creating a script that runs every time I run npm start. It cleans the eslint cache and disables the error overlay.

#!/usr/bin/env node
import * as path from 'path';
import { readFileSync, writeFileSync, pathExistsSync } from 'fs-extra';
import rimraf from 'rimraf';

// clean the cache
const cachePath = [__dirname, '..', '..', '..', 'client', 'node_modules', '.cache'].join(path.sep);
if (pathExistsSync(cachePath)) {
	console.log('Reset IDE: cleaned cache');
	rimraf.sync(cachePath);
}

// path to the file creating the error overlay
const filePath = [__dirname, '..', '..', '..', '..', 'node_modules', 'react-dev-utils', 'webpackHotDevClient.js'].join(path.sep);
if (pathExistsSync(filePath)) {
	const content = readFileSync(filePath, 'utf-8');
	const newContent = content
		.split('ErrorOverlay.reportBuildError(formatted.errors[0]);')
		.join('');

	if (content !== newContent) {
		writeFileSync(filePath, newContent, 'utf-8');
		console.log(`Reset IDE: patched ${filePath}`);
	}
}