create-react-app: Existing eslint rule configuration fails starting in 3.1.0

Describe the bug

After upgrading to 3.1.1 (and 3.1.0) it’s no longer possible to configure eslint rules that are part of the editor configuration. yarn start will fail with an error about an eslint rule it doesn’t know about.

Definition for rule 'graphql/template-strings' was not found  graphql/template-strings

This makes sense since starting with eslint@6 it will raise errors when attempting to configure unknown rules. However I do not expect existing projects to break because they’ve decided to setup editor only eslint configuration.

I guess eventually this could be solved with the experimental eslint extension, but that’s still experimental unfortunately and still seems to have issues of it’s own.

Did you try recovering your dependencies?

n.a.

Which terms did you search for in User Guide?

https://create-react-app.dev/docs/setting-up-your-editor https://create-react-app.dev/docs/troubleshooting

Environment

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 8.15.0 - ~/.asdf/shims/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.asdf/shims/npm
  Browsers:
    Chrome: Not Found
    Firefox: 68.0.2
    Safari: Not Found
  npmPackages:
    react: ^16.9.0 => 16.9.0
    react-dom: ^16.9.0 => 16.9.0
    react-scripts: 3.1.1 => 3.1.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

npx create-react-app test-app
cd test-app
yarn add -D eslint-config-prettier

 echo "module.exports = {
   extends: [
     'react-app',
     'prettier/prettier',
   ],
   plugins: ['prettier']
 }
 " > .eslintrc.js

echo "/* eslint-disable prettier/prettier */" >> src/App.js
yarn start

Expected behavior

The app to continue to be started. At least in the case of an already existing app with already existing editor configuration.

Actual behavior

Definition for rule 'prettier/prettier' was not found  prettier/prettier

Reproducible demo

https://github.com/klaaspieter/create-react-app-eslint-editor-configuration

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 15 (4 by maintainers)

Most upvoted comments

also experiencing this bug with my existing eslint config

micahstubbs on Oct 28, 2019

I was just pointing out that create-react-app just ignored custom eslint rules before. And as far as I know that should still be the case if EXTEND_ESLINT is set to false so if that is breaking your build that sounds like a bug.

rovansteen on Oct 23, 2019

I feel many teams had eslint in place anyway (without the browser integration) but I have no numbers to back this up. I created this issue because upgrading to 3.1.0 broke our build. Feel free to close it if custom ESLint rules were just accidentally supported and 3.1.0 ‘fixed’ it.

klaaspieter on Oct 23, 2019

Ah i’m guessing you haven’t enabled the experimental flag @klaaspieter. See create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config.

I haven’t because I feel this is a regression from previous versions of create react app. Before 3.1.0 I could run my app with custom eslint rules. Starting at 3.1.0 I have to EXTEND_ESLINT=true which, when first introduced at least, had it’s own set of problems (https://github.com/facebook/create-react-app/issues/7552).

klaaspieter on Oct 21, 2019