@serus/craco-plugin-react-hot-reload/index.js

This craco plugin, allows you to add hot load support to create-react-app without ejecting it

module.exports = {
  overrideWebpackConfig: ({ webpackConfig, context: { env } }) => {
    if (env === "production") {
      return webpackConfig;
    }

    let conf = webpackConfig;

    if (!conf || !conf.module || !conf.module.rules) {
      return webpackConfig;
    }

    const condition = u => typeof u === "object" && u.loader && u.loader.includes("eslint-loader");
    const rule = conf.module.rules.find(rule => rule.use && rule.use.some(condition));

    if (rule) {
      const use = rule.use.find(condition);
      if (use) {
        use.options.emitWarning = true;
      }
    }

    return conf;
  },

  overrideCracoConfig: ({ cracoConfig }) => {
    if (!cracoConfig.webpack) {
      cracoConfig.webpack = {};
    }
    if (!cracoConfig.webpack.alias) {
      cracoConfig.webpack.alias = {};
    }

    cracoConfig.webpack.alias["react-dom"] = "@hot-loader/react-dom";

    return {
      ...cracoConfig,
      babel: {
        ...(cracoConfig.babel || {}),
        plugins: [...(cracoConfig.babel.plugins || []), "react-hot-loader/babel"]
      }
    };
  }
};