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!

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

Answer 2

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 :|

Answer 3

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.

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