HMR not working with `withStyle`

Question

Using Material-UI's withStyle, with the example bellow, when changing the color to blue, I see on the console that HMR is doing its job updating modules but the changes don't actually appear on screen, I have to reload the page.

If I add a style property to the div and set the color to blue there, it appears properly on screen.

const styles = () => ({
    root: {
        color: 'black',
    },
});

class Test extends React.Component {
    render() {
        const { classes } = this.props;
        return (
            <div calssName={classes.root}>
              This is a test
            </div>
        )
    }
}

const select = function (state) {
    return state;
};

export default compose(
    withStyles(styles),
    connect(select),
)(Test);

I think I didn't totally understand this withStyles thing, my guess is a misconfiguration so here's my webpack.config.dev.js :

const Path = require('path');
const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: '#eval-source-map',
  entry: [
    'babel-polyfill',
    Path.join(__dirname, '../../app/application/delegate'),
  ],
  output: {
    filename: 'bundle.js',
    path: Path.join(__dirname, '../public/'),
    publicPath: '/',
  },
  module: {
    loaders: [
      {
        test: /\.jsx$|\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-2'],
          plugins: [['react-transform', {
            transforms: [{
              imports: ['react'],
              locals: ['module'],
              transform: 'react-transform-hmr',
            }],
          }]],
        },
      },
      {
        test: /\.css$/,
        use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        })),
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
    ],
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        PLATFORM_ENV: JSON.stringify('web'),
      },
    }),
    new Webpack.NoEmitOnErrorsPlugin(),
    new ExtractTextPlugin('styles.css'),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
};

HMR not working with `withStyle`

0 Answers0