Webpack-dev-server: [email protected] keeps reloading page in a loop [BUG]

[devblazer]

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://[email protected]/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;

[SpaceK33z]

Does this also happen with webpack --watch?

This issue looks a lot like https://github.com/webpack/webpack/issues/2320, but it could also be related to https://github.com/webpack/watchpack/issues/25.

[devblazer]

For #2320, it seems unlikely the output there is very different to what I get and mine only occurs on an hmr rebundle not the initial build. Also I dont have a postcss loader or a extract text plugin.

In regards to #25 I might be wrong about this, but I don't think its related either as my watcher loops indefinitely not for a fixed amount of time.

As for the webpack --watch what is the command I should use there (i am not used to running webpack in watch mode)

My current webpack-dev-server is running on:
./node_modules/.bin/webpack-dev-server --content-base public --inline --hot
What would the corresponding webpack --watch command line be?

I tried:
./node_modules/.bin/webpack --watch --hot
it did compile, but the watch didn't seem to be working

Its also worth noting, this issue only started occuring when I migrated to webpack2

[SpaceK33z]

I'm basically trying to figure out if this issue should live here, in the dev-server repo, or in the main webpack repo. dev-server does very little (almost nothing even) in regards to compiling things. It only sends the hot updates it gets from webpack to the browser. The script handling this update in the browser also lives in the main webpack repo.

./node_modules/.bin/webpack --watch --hot should work, you'll not see the output in a browser but you can at least debug if the recompiling happens.

Can you try what happens without using multiStep: true? There are some known problems with that and webpack 2.

[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.

[SpaceK33z]

Okay, I'm going to close this since this isn't related to webpack-dev-server.

[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 ;)