eslint in terminal Cannot find module 'eslint-config-react-app'

Question

I use create-react-app to make a react app.

the linter works in create-react-app but now i want make it work in my sublimetext.

1. Installed eslint yarn global add eslint (eslint v4.1.1 but also tried v3.19.0 because react app uses that one)
2. run eslint --init and configured it
3. go to directory of project and made a file called .eslintrc
4. inside file:

{
"extends": "react-app"
}

5. run in project directory eslint src/App.js

6. get error in terminal :

   Referenced from: /mnt/storage/Dev/newapp/.eslintrc Error: Cannot find module 'eslint-config-react-app'

   Referenced from: /mnt/storage/Dev/newapp/.eslintrc at ModuleResolver.resolve (/home/user/.config/yarn/global/node_modules/eslint/lib/util/module-resolver.js:74:19) at resolve (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:515:25) at load (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:584:26) at configExtends.reduceRight (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:421:36) at Array.reduceRight (native) at applyExtends (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:405:28) at loadFromDisk (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:556:22) at Object.load (/home/user/.config/yarn/global/node_modules/eslint/lib/config/config-file.js:592:20) at Config.getLocalConfigHierarchy (/home/user/.config/yarn/global/node_modules/eslint/lib/config.js:228:44) at Config.getConfigHierarchy (/home/user/.config/yarn/global/node_modules/eslint/lib/config.js:182:43)

I did add yarn global add babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype. but i think this is not necessary anymore!

Nates

Answer 1

I think if you add the module mentioned in the error message (eslint-config-react-app) it should work? eg. yarn add --dev eslint-config-react-app

Muriel

Answer 2

There's probably a misconfiguration in your package-lock.json file, where ESLint was removed. I've encountered the exact same issue and solved it via:

1. cd <your-project-directory>
2. rm package-lock.json
3. rm -rf node_modules
4. npm install

You can run npm ls eslint --depth=99 to verify the eslint package is installed. I've stumbled upon this via a comment from feross on GitHub.

Supersaturated

Why do things like that even happen? I have a fresh install of React 18 installed by create-react-app and I'm getting this error out of the box. Whose fault is it? React's, create-react-app's or npm's? – Catboat

Answer 3

So what i found out is that you have to install 'all' the eslint packages global. cause it won't let you deal with global eslint and local packages

so what i did was yarn global add eslint@^3.19.0 eslint-plugin-jsx-a11y@^5.0. and now it works :|

Nates

Answer 4

First install this package, ESLint and the necessary plugins.

npm install --save-dev eslint-config-react-app [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Then create a file named .eslintrc.json with following contents in the root folder of your project:

 {
  "root": true,
  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "browser": true,
    "node": true,
    "jquery": true
  },
  "rules": {
    "quotes": 0,
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0
  },
  "globals": {
    "jQuery": true,
    "$": true
  }
}

See Reference

Gerald

Answer 5

While organizing a hackathon, I ran across this issue. The above configuration-related solutions did not work for me.

This ended up being several bugs in one for me.

First, SublimeText is currently (Nov 12, 2021) not compatible with Eslint v8.0, which was released somewhere in September or October 2021. I solved this by doing the following:

# HEADS UP: If your project currently relies on eslint v8.0, then further Sublime Text configuration might be required.

# Global install
npm uninstall -g eslint
npm install -g eslint@7

# Local install
npm uninstall -D eslint
npm install -D eslint@7

But that wasn't sufficient. Now the thing wanted typescript, because I had chosen to use typescript when i initialized the file on my local project. (You can do this too by running eslint --init)

So I had to do the following:

# Local install
npm install -D typescript

Works just fine now.

Scathing

Answer 6

My solution:

• Just delete 'extends' param from .eslinttc.js'
• Then delete 'env' properties apart from 'browser' from .eslinttc.js'
• Then hit the 'yarn lint' in console, and it will tell you what is missing

Update @typescript-eslint/* packages, to avoid TS version errors

In my case these two did the trick

 npm install eslint-plugin-react-native@latest --save-dev
 npm install eslint-plugin-unused-imports@latest --save-dev

Longanimity