Webpack middleware stopped watching for file-changes

Question

I used webpack-dev-middleware and webpack-hot-middleware for months and it was working just FINE, but now, something happened and webpack stopeed watching for file changes so bundle rebuilds only when i restart the app. What could happen? I'm on arch linux with fs.inotify.max_user_watches = 524288 setting on and with :set backupcopy=yes vim option tuned as well. What could happen? How to get things back?

The initial bundling happen, middleware loads properly as i see in logs. Here are lines loading webpack middlewares in entry app.

(function() {
  if (process.env.NODE_ENV === 'development') {
    console.server('Running webpack middleware...');
    var webpack = require('webpack');
    var webpackConfig = require('../config/webpack.config.js');
    var compiler = webpack(webpackConfig);

    app.use(require("webpack-dev-middleware")(compiler, {
      hot: true,
      noInfo: false,
      stats: {
        colors: true
      },
      historyApiFallback: true,
      publicPath: '',
      contentBase: './app'
    }));

    app.use(require("webpack-hot-middleware")(compiler, {
      log: console.webpack,
      heartbeat: 10 * 1000
    }));
  }
})();

and webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const PATHS = {
  app: {
    client: path.resolve(__dirname, '../app'),
    admin: path.resolve(__dirname, '../admin-app')
  },
  styles: path.resolve(__dirname, '../public/stylesheets'),
  build: path.resolve(__dirname, '../public/build'),
  public: path.resolve(__dirname, '../public')
};

const plugins = [
  // Shared code
  new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
  // Avoid publishing files when compilation fails
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development'),
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
  }),
  new webpack.optimize.OccurenceOrderPlugin(),
  new ExtractTextPlugin('stylesheet.css')
];

const config = {
  env: process.env.NODE_ENV,
  entry: {
    client: [path.resolve(PATHS.app.client + '/index.js'), 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr'],
    admin: [path.resolve(PATHS.app.admin + '/index.js'), 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr']
  },
  output: {
    path: PATHS.build,
    filename: '[name].bundle.js',
    publicPath: '/'
  },
  stats: {
    colors: true,
    reasons: true
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    alias: {},
    extensions: ['', '.jsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: PATHS.app.client,
        loaders: ['react-hot', 'babel']
      },
      {
        test: /\.jsx?$/,
        include: PATHS.app.admin,
        loaders: ['react-hot', 'babel']
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader', 'sass-loader'])
      }
    ]
  },
  plugins: plugins,
  devtool: 'eval'
};

module.exports = config;

score 1 · Answer 1 · answered Jun 14 '16 at 12:06

1

Lol just a stupid typo in console.webpack function which passed to webpack-hot-middleware log didn't let it work. Saw Error when scrolled to the very top of huge log outpt provided by webpack, and that made this typo so stealthy.

answered Jun 14 '16 at 12:06

Ilya Lopukhin

692
8
22

Webpack middleware stopped watching for file-changes

1 Answers1