create-react-app: eslint-config-react-app is not compatible with ESLint 8

Temporary workaround: npm i eslint-plugin-flowtype@latest eslint-plugin-import@latest eslint-plugin-react-hooks@next --force --save-dev

Spent a few more hours on this, it’s really impossible to come up with a working package.json. This is what I want to have working:

  "dependencies": {
    "eslint-config-react-app": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "worker-loader": "^3.0.8"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.0",
    "@babel/core": "^7.17.2",
    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.9.0",
    "eslint-plugin-react": "^7.28.0",
    "jest-junit": "^12.0.0",
    "react-scripts": "^5.0.0"
  },

The number of permutations I’ve tried with different versions is about 50, and it’s just way too much of a headache iterating on a simple issue like dependency updates. How do we get attention paid to this nightmare we face as react developers?

Any update on the issue ? Still having errors

Looks like the issue has been fixed.

I just did yarn add -D eslint-plugin-flowtype@latest and that did the trick

Temporary workaround for yarn: yarn add eslint-plugin-flowtype@latest eslint-plugin-import@latest eslint-plugin-react-hooks@next --force -D

It is still happening for me… and none of the fixes above are working.

thanks @Avasam that did the trick

It would be great to have this support in the upcoming v5.

Nice. Figured I search for eslint before posting an issue to tell that eslint-config-react-app is not providing a new-config-file-format-compatible configuration for eslint. Found 197 open issues with ‘eslint’. Half of them stale. At least 3 issues about the incompatibility, one of them also stale. React truly is the best framework in the world (I’m german and that was sarcasm)

Why not back off eslint-config-react-app back to 7.x of eslint in the released version until 8.x is able to be integrated? It makes doing upgrades a bit of a mess. Just a suggestion.

Same behavior here!

Eslint 8.0.0 eslint-plugin-flowtype: 6.1.0 eslint-config-react-app: 6.0.0

➜ yarn run eslint packages --ext .ts,.tsx --config .eslintrc
yarn run v1.22.10
$ /Users/oeduardoal/projects/gb/flora/node_modules/.bin/eslint packages --ext .ts,.tsx --config .eslintrc

Oops! Something went wrong! :(

ESLint: 8.0.1

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Failed to load plugin 'flowtype' declared in '--config » eslint-config-react-app': Package subpath './lib/rules/no-unused-expressions' is not defined by "exports" in /Users/oeduardoal/projects/gb/flora/node_modules/eslint/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:413:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:652:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (/Users/oeduardoal/projects/gb/flora/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/oeduardoal/projects/gb/flora/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js:8:51)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

For me, I ended up needing to do this in Package.json:

  "overrides": {
    "eslint": "^8.40.0",
    "eslint-plugin-flowtype": "^8.0.3",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2"
  }

Probably would be better to scope those overrides, but I’m not too worried since these are just for linting.

Here is a dirty fix that you can use with patch-package:

diff --git a/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js b/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
index 6171456..f1a9d72 100644
--- a/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
+++ b/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _noUnusedExpressions = require('eslint/lib/rules/no-unused-expressions');
+var _noUnusedExpressions = require('eslint/use-at-your-own-risk').builtinRules.get('no-unused-expressions');
 
 var _noUnusedExpressions2 = _interopRequireDefault(_noUnusedExpressions);