Webpack-dev-server@2.2.0 keeps reloading page in a loop [BUG]

I am using webpack and webpack-dev-server @2.2.0

When i start up webpack devserver with command: ./node_modules/.bin/webpack-dev-server --content-base public --inline --hot All works well and I can load up the page. However, as soon as a make a code change and the hmr kicks in, it gets stuck in a loop and keeps firing the hmr over and over again and keeps reloading the web page over and over again as a result.

The strange part is it seems to be rebundling a locale folder for the moment.js library instead of the file I actually worked on.

My setup: Mac OS X el Capitan

bundling output from webpack-dev-server on any file change (it keeps repeating with different hashes each time):

Asset      Size  Chunks             Chunk Names
8cff793821cfbd1f5322.hot-update.json  35 bytes          [emitted]
chunk    {0}  (main) 3.25 MB [entry]
    [383] ./~/moment/locale ^\.\/.*$ 2.61 kB {0} [optional] [built]
+ 545 hidden modules
Compilation needs an additional pass and will compile again.
    webpack: bundle is now VALID.

package.json:

{
  "scripts": {
    "postinstall": "",
    "build": "webpack -p --config ./webpack.production.config.js",
    "test-once": "karma start",
    "test": "watch 'npm run test-once' src/",
    "dev": "./node_modules/.bin/webpack-dev-server --content-base public --inline --hot"
  },
  "dependencies": {
    "ainojs-animation": "^1.2.6",
    "babel": "^6.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-decorators": "^6.13.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "chai": "^3.5.0",
    "chai-enzyme": "^0.6.1",
    "clean-webpack-plugin": "git+ssh://[e-mail]/devblazer/clean-webpack-plugin.git",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.4.1",
    "css-loader": "^0.25.0",
    "d3": "^4.3.0",
    "d3-timer": "^1.0.3",
    "enzyme": "^2.7.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "font-awesome": "^4.7.0",
    "http-proxy": "^1.15.2",
    "jquery": "^3.1.1",
    "json-loader": "^0.5.4",
    "karma": "^1.4.0",
    "karma-chai": "0.1.0",
    "karma-chai-plugins": "0.6.0",
    "karma-chai-sinon": "0.1.5",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "0.2.0",
    "karma-mocha-reporter": "1.1.1",
    "karma-phantomjs-launcher": "0.2.1",
    "karma-sinon": "1.0.4",
    "karma-sinon-chai": "1.1.0",
    "karma-sourcemap-loader": "0.3.5",
    "karma-webpack": "^2.0.1",
    "lodash": "^4.16.6",
    "mocha": "^3.2.0",
    "mocha-webpack": "^0.7.0",
    "moment": "^2.17.1",
    "node-sass": "^3.11.2",
    "phantomjs": "^2.1.7",
    "react": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.3.2",
    "react-fa": "^4.1.2",
    "react-icons": "^2.2.1",
    "react-redux": "^4.4.6",
    "redux": "^3.6.0",
    "sass-loader": "^4.0.2",
    "simple-xml2json": "^1.2.3",
    "source-map-support": "^0.4.10",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "watch": "0.16.0",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

.babelrc:

{
  "presets": [["es2015",{"modules":false}], "stage-2", "react"]
}

webpack.config.js

var Webpack = require('webpack');
var path = require('path');
var appPath = path.resolve(__dirname, 'src', 'deviceReport');
var deployPath = path.resolve(__dirname, '..','etc','scripts','cool_reports_1','webpack_build');

var config = {
    context: __dirname,
    devtool: 'eval-source-map',
    entry: [
        path.resolve(appPath, 'entry.js')],
    output: {
        path: deployPath,
        filename: 'bundle.js',
        publicPath: '/webpack_build/'
    },
    resolve: {},
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /(node_modules[\\\/]+(?!react-icons)|bower_components)/,
            },
            {
                test: /\.s?css$/,
                loader: "style-loader!css-loader?sourceMap&localIdentName=[local]--[hash:base64:5]!sass-loader",
            },
            {test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
            {test: /\.json/, loader: "json-loader"},
            {test: /\.png/, loader: "url-loader?limit=100000&mimetype=image/png"},
            {test: /\.gif/, loader: "url-loader?limit=100000&mimetype=image/gif"},
            {test: /\.jpg/, loader: "file-loader"},
            {test: /\.svg/, loader: "url-loader?limit=10000"},
            {test: /\.woff/, loader: "url-loader?limit=100000"},
            {test: /\.woff2/, loader: "url-loader?limit=100000"},
            {test: /\.ttf/, loader: "file-loader"},
            {test: /\.eot/, loader: "file-loader"}
        ]
    },
    plugins: [
        new Webpack.HotModuleReplacementPlugin({multiStep:true})
    ]
};

module.exports = config;

[devblazer]

Thanks {multistep:false} in the hotmodule replacement plugin seems to have solved it. Although it still rebundles node_modules/moment/locale whenever there is something to bundle, weird.
But it no longer gets stuck in a loop, which was my main issue.

[brada1703]

Just for anyone who comes along to this page and has the same problem, I found one thing that helped in my situation:

go to webpack.mix.js

It should have:

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

add: .options({processCssUrls: false})

to end up with:

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({processCssUrls: false})
   ;

This solved it for me. Hopefully, it helps someone along the line.

Thanks 😉