P
P
Pavel2017-04-05 12:35:02
Node.js
Pavel, 2017-04-05 12:35:02

Webpack hot css reload with HMR enabled stops working, how to fix?

Good day!
I found a ready -made boilerplate for react-web-native-app on the net. Everything would be fine, but the author did not solve the problem with the work of hot-reloading less with HMR enabled.
If I comment on the line in the config new webpack.HotModuleReplacementPlugin(), then the styles are recompiled without reloading the page. Everything is as it should be.
If I turn it on, then every file save causes a reload.
Having aired the question on the network, many write that the problem is in the extract-text-webpack-plugin, but I do not use it.
Maybe there are some guesses?

Complete webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    path.join(__dirname, '../../app/web/index'),
  ],
  output: {
    path: path.join(__dirname, '../public'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: 'style!css?sourceMap!less?sourceMap',
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
          plugins: ,
        },
      }, {
        test: /\.json$/,
        loader: 'json',
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        PLATFORM_ENV: JSON.stringify('web'),
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vlad Feninets, 2017-04-05
@Carduelis

react-transform-hmr is now deprecated.
try installing the 3rd beta of react-hot-loader .
remove "react-transform-hmr" from config, add "plugins": ["react-hot-loader/babel"].
and in entry - add 'react-hot-loader/patch',
in general, here's the dock - here in more detail, in theory it should start.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question