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

[klaaspieter]

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

1. npx create-react-app test-app
2. cd test-app
3. yarn add -D eslint-config-prettier
4. echo "module.exports = { extends: [ 'react-app', 'prettier/prettier', ], plugins: ['prettier'] } " > .eslintrc.js
5. echo "/* eslint-disable prettier/prettier */" >> src/App.js
6. 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

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[klaaspieter]

Still reproducible on the latest master.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ianschmitz]

Can you confirm this is still an issue in 3.2.0 @klaaspieter?

[klaaspieter]

Just checked. Still reproducible on the latest master.

[ianschmitz]

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

My guess is the error you're seeing sounds related to https://github.com/facebook/create-react-app/issues/7712. If you haven't set the experimental flag then your configuration isn't being picked up by eslint in our webpack config, and will show that error when you try to disable rules that it doesn't know about.

[klaaspieter]

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).

[rovansteen]

That was not supported before 3.1.0 but there was nothing in create-react-app stopping your browser from picking up the eslint configuration in your project.

[klaaspieter]

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.

[rovansteen]

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.

[micahstubbs]

also experiencing this bug with my existing eslint config

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[klaaspieter]

I'm having trouble reproducing this issue because yarn create-react-app test-app no longer works.

I'm going to assume this issue wasn't fixed, but unfortunately I cannot say for certain.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.