A way to hack create-react-app for custom config

.eslintrc.js

// Put me under ./src

module.exports = {
  extends: 'react-app',

  rules: {
    eqeqeq: 'off'
  }
}

README.md

Until now it's hard to custom facebookincubator/create-react-app without npm eject.

This gist teach you how to hack that.

1. Add a new folder in your project named scripts.

2. Put three .js files below in scripts folder.

3. Change your package.json scripts section:

   "scripts": { "start": "node ./scripts/react-scripts.js start", "build": "node ./scripts/react-scripts.js build", "test": "react-scripts test --env=jsdom" }

4. Create .eslintrc.js for yourself.

What happened after these change?

When you run react-scripts start. react-scripts.js will find ../scripts/start.js and run it. This why we put them into scripts folder.

Before react-scripts.js run the real start.js. We require and modify webpack config. That's all we done.

build.js

/**
 * We can hack build script now.
 * This is similar to 'start.js'. Be sure you have compatible config to avoid build time bug.
 */

process.env.NODE_ENV = 'production'
require('dotenv').config({silent: true})

var path = require('path')
var paths = require('react-scripts/config/paths')
var config = require('react-scripts/config/webpack.config.prod')

config.eslint.configFile = path.join(paths.appSrc, '.eslintrc.js')
// config.eslint.useEslintrc = true // I don't know why this line not work!

require('react-scripts/scripts/build')

react-scripts.js

/*
 * This command have same function as official because we copy it only.
 * It will run different scripts in '../scripts/(start|build).js'. Equal to './(start|build).js'
 */

var spawn = require('cross-spawn');
var script = process.argv[2];
var args = process.argv.slice(3);

switch (script) {
  case 'build':
  case 'eject':
  case 'start':
  case 'test':
    var result = spawn.sync('node', [require.resolve('../scripts/' + script)].concat(args), {stdio: 'inherit'});
    process.exit(result.status);
    break;
  default:
    console.log('Unknown script "' + script + '".');
    console.log('Perhaps you need to update react-scripts?');
    break;
}

start.js

/**
 * We can hack start script now.
 */

// Setup env first. Webpack config will reference it.
process.env.NODE_ENV = 'development'
require('dotenv').config({silent: true})

var path = require('path')
var paths = require('react-scripts/config/paths')

// We require webpack config here.
var config = require('react-scripts/config/webpack.config.dev')

// Begin hack. Modify webpack config in node modules cache. This example show you how to custom eslint config. You can add 'less-loader' by yourself.
config.eslint.configFile = path.join(paths.appSrc, '.eslintrc.js')
// config.eslint.useEslintrc = true

// Run real start script. Because node wont load modules if they stay in cache. So webpack will got modified config.
require('react-scripts/scripts/start')

To whom it may concern, recently it was added by React team - https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config