eslintrc rules not being followed in react code

Question

I’m getting an error when I run my react app that "shouldn't" be.

This is a fresh instance of ‘create-react-app’ and a single component being used. I've installed eslint and prettier locally and gotten them all set up.

The error is:

“ Compiled with problems: ERROR src/components/Header.js Line 4:9: 'name' is assigned a value but never used no-unused-vars Line 8:17: 'x' is not defined no-undef Search for the

“

The only solution I’ve found (Aside from commenting out the offending code) is to put “no-unused-vars” and “no-undef” into the rules of the .eslintrc file and turn them off. (I would like for eslint to warn me when either of these are triggered, but setting them to warn didn’t work either)

I’ve done that, and it still throws the error…

Component code:

import React from 'react';

const Header = () => {
  const name = 'Blaze';
  return (
    <div>
      <h1>Hello world!!!</h1>
      <h3>I am {x ? 'yes' : 'no'}</h3>
    </div>
  );
};

export default Header;

Eslint rules: (This in inside the workspace, not the global settings)

    "rules": {
        "react/react-in-jsx-scope": "off",
         "no-unused-vars": "off",
         "no-undef": "off"
    }

Any Suggestions?

Answer 1

Line 4:9: 'name' is assigned a value but never used no-unused-vars

As the warning states, name is never used.

Line 8:17: 'x' is not defined

You used x in your JSX but never defined it.

See the updated code below with an example illustrating how the warning and error might be addressed.

import React from 'react';

const Header = () => {
  // Before, we only declared 'name'. Now, we use it in the
  // h1 in your JSX below - My name is {name}
  const name = 'Blaze';
  // Before, we used 'x' in the JSX in the h3 as the
  // the first operand in your ternary statement, but we 
  // never defined it. Now we initialize 'x' to true.
  const x = true;
  
  return (
    <div>
      <h1>Hello world!!! My name is {name}!</h1>
      <h3>I am {x ? 'yes' : 'no'}</h3>
    </div>
  );
};

export default Header;

Answer 2

create-react-app creates a eslintConfig section in your package.json where you can override the default eslint configuration by adding a overrides subsection like this (note the files section is required):

 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": ["**/*.js?(x)"],
        "rules": {
          "no-unused-vars": "warn",
          "no-undef": "warn"
        }
      }
    ]
  }