Atom & eslint: Cannot find module 'eslint-config-react-app'

5
votes

Since I reinstalled my NPM dependencies in my create-react-app project, Atom's eslint gives me this error on the top of every file :

Error while running ESLint: Cannot find module 'eslint-config-react-app'.

While react-scripts's eslint doesn't raise any warning or error. By the way, the package eslint-config-react-app is installed in node_modules. I tried to reinstall linter-eslint, atom, the NPM dependencies, etc. Nothing worked.

Has anyone an idea ?

Here is my .eslintrc :

{
  "extends": "react-app",
  "rules": {
    "jsx-a11y/anchor-is-valid": 0,
    "react/jsx-no-comment-textnodes": 0,
    "no-unused-vars": ["warn", {
      args: "all",
      ignoreRestSiblings: false,
      argsIgnorePattern: "^_$"
    }]
  }
}

Edit : I don't know why, but all of the sudden, the error changed and now it's this one on top of every js file :

Error while running ESLint: Invalid regular expression flags

EDIT 2

None of the given solutions worked in my case. The problem with linter-eslint is not solved. But I found a workaround for now : using fast-eslint instead of linter-eslint. Works just fine.

2
reactjsatom-editorcreate-react-appeslint
npm i -g babel-eslint@^7.2.3 eslint@^4.1.1 eslint-plugin-flowtype@^2.34.1 eslint-plugin-import@^2.6.0 eslint-plugin-jsx-a11y@^5.1.1 eslint-plugin-react@^7.1.0 - Wilco
In my case using vscode, this happened when I imported multiple projects. So I closed everything and imported only my project as a root folder - Yoannes Geissler
Are you installing ESLint globally or locally? Atom might be using the globally installed one and can not resolve locally installed plugins. - Jackyef
@Jdub This doesn't work. - ostrebler
@YoannesGeissler Not my case, I'm using Atom and other eslint configs in other open projects are working just fine. - ostrebler

2 Answers

0
votes

For anyone else trying this, one solution is installing eslint-config-react-app globally, along with all of its peer deps. At the moment, that's:

Refer to https://github.com/facebook/create-react-app/issues/3633#issuecomment-361485857

npm i -g babel-eslint@^7.2.3 eslint@^4.1.1 eslint-plugin-flowtype@^2.34.1 eslint-plugin-import@^2.6.0 eslint-plugin-jsx-a11y@^5.1.1 eslint-plugin-react@^7.1.0
0
votes

Since you mentioned that the problem occurred after you reinstalled npm modules, it might be related to npm dependency resolution. So you might have multiple versions of the same module and atom might use the wrong one.

  1. Check whether your react-scripts version is 0.2.0 or higher according to Displaying Lint Output in the Editor

  2. Remove all eslint related dependencies from your package.json.

    This means removing babel-eslint, eslint, eslint-plugin-flowtype, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, etc

    Create react app installs all the linting dependencies under the hood so you shouldn't manually install them.

  3. Remove all global eslint related dependencies.

    Generally you don't need to use globally installed eslint dependencies as you might have different eslint versions in each of your projects.

The latest version of linter-eslint should then use the correct eslint dependencies from under node_modules in your project.

UPDATE: Based on your comments and edited question, I tried reproducing this using CRA, replacing the dependencies in package.json, reinstalling and adding the following .eslintrc.

Notice I added " around the options keys in the "no-unused-vars". 

{
  "extends": "react-app",
  "rules": {
    "jsx-a11y/anchor-is-valid": 0,
    "react/jsx-no-comment-textnodes": 0,
    "no-unused-vars": ["warn", {
      "args": "all",
      "ignoreRestSiblings": false,
      "argsIgnorePattern": "^_$"
    }]
  }
}

Having done all this I couldn't reproduce the issue.