[HMR] Cannot find update (Full reload needed)

I apologise if this has been submitted before, but I am running into problems with HMR. I am trying to implement HMR in my framework and thought it was working until recently. Now whenever the modules are updated, the HMR reloads the page indefinitely. The error output is below:

[HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)
[HMR] Reloading page

I am using a slightly out of the ordinary setup: browsersync as my server, webpack for js compilation and my config is below:

Browsersync/HMR setup

/**
 * gulp serve
 * Gulp task to run Browsersync server
 */
const path = require('path');
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../config');
const webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig);

gulp.task('serve', ['watcher'], () => {
    webpackConfig.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    );

    for (const key in config.js.entryPoints) {
        config.js.entryPoints[key].push('webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true');
    }

    browserSync.init({
        server: {
            baseDir: './',
        },

        middleware: [
            webpackDevMiddleware(compiler, {
                stats: 'errors-only',
                publicPath: path.resolve(webpackConfig.output.publicPath),
            }),
            webpackHotMiddleware(compiler),
        ],

        files: [
            `${config.css.distDir}/**/*.css`,
            // `${config.js.distDir}/**/*.js`,
            `${config.img.distDir}/**/*`,
            `${config.svg.distDir}/**/*`,
            '**/*.html',
        ],
    });
});

Webpack config

/**
 * Webpack config
 */
const path = require('path');
const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const config = require('../config');

const webpackConfig = {
    entry: config.js.entryPoints,
    output: {
        path: path.resolve(`${config.js.distDir}`),
        publicPath: '/',
        filename: '[name].js',
    },
    devServer: {
        inline: true,
        port: 3000,
        stats: 'errors-only',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                //exclude: /node_modules/,
                loader: 'babel',
                query: {
                    // presets: [
                    //  'es2015',
                    // ],
                    cacheDirectory: true,
                },
            },
        ],
    },
    devtool: 'source-map', // Source maps
    plugins: [
        // Watcher doesn't work well if you mistype casing in a path so we use
        // a plugin that prints an error when you attempt to do this.
        // See https://github.com/facebookincubator/create-react-app/issues/240
        new CaseSensitivePathsPlugin(),
    ],
};

if (process.env.RELEASE) {
    webpackConfig.plugins.push(
        new webpack.optimize.DedupePlugin(),

        // Minify the code using Uglify
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),

        new webpack.BannerPlugin(config.misc.banner, {
            raw: true,
        })
    );
}

module.exports = webpackConfig;

Am I doing anything obviously wrong?