reactjs app webpack dev server file watch delay fix for react-scripts

post_install_script.js

/*
In package.json:

"postinstall": "node ./extras/post_install_script.js"

*/

const fs = require("fs");
const path = require("path");
const _filePath = path.join(__dirname, "../node_modules/react-scripts/config/webpackDevServer.config.js");

// when a lot of files are changed at once Webpack Dev Server fails to track file
// changes for all of the files at once and state becomes broken. Some files
// are there but may be "missing" for webpack etc. etc.
// this is making sure to set `aggregateTimeout` option for file watcher, so
// file changes are delayed by 600ms and it's enough to avoid such issues and is
// too small delay to have any developer experience issue

let content = fs.readFileSync(_filePath, "utf8").toString();
let watchOptions = content.split("watchOptions: {")[1].split("}")[0];

if (watchOptions.indexOf("aggregateTimeout") === -1) {
  content = content.replace("watchOptions: {", "watchOptions: {\n\t\t\taggregateTimeout: 600,");
  fs.writeFileSync(_filePath, content);
}