Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

EXTEND_ESLINT=true - "Failed to compile"

See original GitHub issue

I didn’t like seeing “no-unused-vars” warnings in browser console, so I found about the EXTEND_ESLINT=true feature and tried to configure it. The feature does indeed seem to work, only not the way I expected.

Now I’m getting the “Failed to compile” error straight away:

  Line 47:11:  Replace `registration` with `(registration)`  prettier/prettier
  Line 68:12:  Replace `error` with `(error)`                prettier/prettier
  Line 76:10:  Replace `(response` with `((response)`        prettier/prettier
  Line 80:44:  Replace `registration` with `(registration)`  prettier/prettier
  Line 97:40:  Replace `registration` with `(registration)`  prettier/prettier

Search for the keywords to learn more about each error.

I have eslint configured with .eslintrc.js file. Here is its content:

module.exports = {
  root: true,
  extends: ['react-app', 'prettier', 'prettier/flowtype', 'prettier/react'],
  plugins: ['import', 'flowtype', 'jsx-a11y', 'react', 'react-hooks', 'prettier', 'emotion'],
  rules: {
    'emotion/jsx-import': 'error',
    'prettier/prettier': 'warn',
    'react/no-did-mount-set-state': 0,
    'no-unused-vars': 0,
    'dot-notation': 0,
    'no-new-func': 0,
    'no-alert': 0,
  globals: {
    Intl: 'readonly',

In the editor (VS Code) this configuration is working OK. All the rules are honored. I also tried to create similar config using eslintConfig section in package.json file, but it didn’t seem to work either.

UPDATE: It looks like that number of errors (per file) is what matters. If I fix few of the prettier issues (so that number of issues is less than 5), it no longer fails to compile, and just displays remaining issues as warnings. It is interesting though that changing from ‘warn’ to ‘error’ or to 0 does not seem to have any effect for ‘prettier/prettier’ rule. Also changing from 0 to 1 for ‘no-unused-vars’ has no effect… Maybe the configuration got cached somehow?..

UPDATE 2: If I set cache option to false in node_modules/react-scripts/config/webpack.config.js, as per, I’m finally getting some sensible behaviour: changes in .eslintrc.js file result in different errors dispayed in browser console (or “Failed to compile”). Still no hot reloading though: I need to restart the web server. Now the remaining question is: with the default setting cache: true, where the cache is stored and how long does it last?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:7

github_iconTop GitHub Comments

aximusnlcommented, Jul 22, 2020

The cache is stored under node_modules/.cache/eslint-loader

First stop the server, then delete the cache, then start the server. You need to do this every time you make changes to the eslint configuration.

k-funkcommented, Oct 29, 2020

Please keep this issue open. Just spent the last few hours trying to:

  1. turn off eslint in CRA in favor of using my own npm run lint, finding out you can’t
  2. Finding out about the undocumented EXTEND_ESLINT=true option
  3. then running into this caching issue, wondering why CRA wasn’t recognizing my changes to my .eslintrc.

All with the goal of trying to provide more rules to my app in a transitional way. I have never wanted to eject CRA so badly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typescript parsing error when EXTEND_ESLINT=true in ...
In order to customise ESLint, I've added EXTEND_ESLINT=true to the .env file. Before adding this setting, my Typescript code compiles fine.
Read more >
"Failed to compile" error for any eslint error. i would like to not ...
any eslint error is just filling the entire screen with an overlay making it impossible to do anything when i have any small...
Read more >
Using ≪Style Lang"Scss"≫ In Vue Component Gives Error - ADocLib
Specifically I'm using Vue Splide adapter to display the slider on.Sass not loading from Vue component when compiling with Laravel Mix.Hi everyone. CSS...
Read more >
Erreur d'analyse typographique lorsque EXTEND_ESLINT ...
Avant d'ajouter ce paramètre, mon code TypeScript compile correctement. ... reactjstypescriptcreate-react-appparsing-errortypescript-eslint.
Read more >
Typescript parsing error when EXTEND_ESLINT=tru ...
Before adding this setting, my Typescript anycodings_create-react-app code compiles fine. Afterwards, I get anycodings_create-react-app parsing errors on ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found