How to set up laravel-mix and react-hot-loader properly?

Question

Laravel

How to set up laravel-mix and react-hot-loader properly?
here is webpack.mix

let mix = require('laravel-mix')

mix.react('resources/assets/js/app.js', 'public/js');
//.sass('resources/assets/sass/app.scss', 'public/css');



mix.webpackConfig({

  output: {
    publicPath: "http://localhost:8080/"
  },

    devServer: {
      hot: true, // this enables hot reload
      inline: true, // use inline method for hmr
      contentBase: path.join(__dirname, "public"),
      https: false, //true
      port: 8080,
      headers: {"Access-Control-Allow-Origin": "*"},
      watchOptions: {
        exclude: [/bower_components/, /node_modules/]
      },
    },

      node: {
        fs: "empty",
        module: "empty"
      },


});


Mix.listen("configReady", webpackConfig => {

  if (Mix.isUsing("hmr")) {

    webpackConfig.entry = Object.keys(webpackConfig.entry).reduce(
      (entries, entry) => {
        entries[entry.replace(/^\//, "")] = webpackConfig.entry[entry];

        console.log(entries);
        return entries;
      },
      {}
    );

    webpackConfig.plugins.forEach(plugin => {
      if (plugin.constructor.name === "ExtractTextPlugin") {
        console.log(plugin.filename);
        plugin.filename = plugin.filename.replace(/^\//, "");
        console.log(plugin.filename);
      }
    });
  }
});

but for some reason it does not work, although there are no errors