Custom eslint config with create-react-app

TL;DR;
Use react-app-rewired with react-app-rewire-eslint.

The problem

Sooner or later you will need to customize Webpack configuration, or, like me, to adjust eslint rules. But you can’t do this as long as you want to use original react-scripts.

So? From official documentation you can learn that the only way to add custom configuration is to do eject your project. But eject is a one way solution.

Nobody expected react-app-rewired, ha ha!

Let me introduce you the react-app-rewired project.

There are four easy steps required to work with custom .eslintrc config:

  1. npm i -D react-app-rewired react-app-rewire-eslint
  2. In project root directory createconfig-overrides.js file and
  3. Edit the file:
//config-overrides.jsconst rewireEslint = require(‘react-app-rewire-eslint’);
module.exports = function override(config, env) {
config = rewireEslint(config, env);
return config;
}

4. In package.json edit “scripts” section by replacing react-scripts with react-app-rewired. It should looks like following:

“scripts”: {
“start”: “react-app-rewired start”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test — env=jsdom”,
“eject”: “react-scripts eject”
},

That’s all!

Agile Web Developer