javascript - webpack dev middleware, how to autoreload when HMR fails - Stack Overflow

I am getting the following message in my browser's console when I change my javascript source:

[HMR] The following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See .html for more details.

My question is how can I tell webpack to just auto reload the page when this happens?

Here is my server set up:

app.use(morgan('dev'));

        // Disable views cache
        app.set('view cache', false);

        var webpack = require('webpack');

        var webpackConfig = require('../client/webpack.config');
        var piler = webpack(webpackConfig);

        app.use(require("webpack-dev-middleware")(piler, {
            noInfo: true, publicPath: webpackConfig.output.publicPath
        }));
        app.use(require("webpack-hot-middleware")(piler));

and my webpack.config:

var path = require('path');
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin');
var webpack = require('../node_modules/webpack');

module.exports = {
    entry: {
        main: [
            'webpack-hot-middleware/client',
            './client/src/main'
        ]
    },
    resolve: {
        alias: {
            breeze: 'breeze-client/build/breeze.debug',
            resources: path.resolve( __dirname, 'src', 'resources'),
            utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
            tradestudyUtils: path.resolve( __dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils')
        }
    },
    output: {
        path: path.join(__dirname, 'client'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'eval',
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new AureliaWebpackPlugin()
    ],
    module: {
        //preLoaders: [
        //    {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}
        //],
        loaders: [
            { test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
            { test: /\.css?$/, loader: 'style!css' },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
            { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
        ]
    }
};

Thanks in advance?

I am getting the following message in my browser's console when I change my javascript source:

[HMR] The following modules couldn't be hot updated: (Full reload needed) This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

My question is how can I tell webpack to just auto reload the page when this happens?

Here is my server set up:

app.use(morgan('dev'));

        // Disable views cache
        app.set('view cache', false);

        var webpack = require('webpack');

        var webpackConfig = require('../client/webpack.config');
        var piler = webpack(webpackConfig);

        app.use(require("webpack-dev-middleware")(piler, {
            noInfo: true, publicPath: webpackConfig.output.publicPath
        }));
        app.use(require("webpack-hot-middleware")(piler));

and my webpack.config:

var path = require('path');
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin');
var webpack = require('../node_modules/webpack');

module.exports = {
    entry: {
        main: [
            'webpack-hot-middleware/client',
            './client/src/main'
        ]
    },
    resolve: {
        alias: {
            breeze: 'breeze-client/build/breeze.debug',
            resources: path.resolve( __dirname, 'src', 'resources'),
            utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
            tradestudyUtils: path.resolve( __dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils')
        }
    },
    output: {
        path: path.join(__dirname, 'client'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'eval',
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new AureliaWebpackPlugin()
    ],
    module: {
        //preLoaders: [
        //    {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}
        //],
        loaders: [
            { test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
            { test: /\.css?$/, loader: 'style!css' },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
            { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
        ]
    }
};

Thanks in advance?

• javascript
• webpack

Share Improve this question Follow asked Apr 1, 2016 at 20:01 pQuestions123pQuestions123 4,62166 gold badges3030 silver badges6060 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can pass parameter reload to webpack-hot-middleware/client:

    entry: {
        main: [
            'webpack-hot-middleware/client?reload=true',
            './client/src/main'
        ]
    },