Unable to modify component props from React DevTools for Chrome

Question

I am developing a React application and have setup webpack to package my code into bundles.

However when I load my application in Chrome with React DevTools and try to modify the props of a component via the extension, it is not changing the value or re-rendering with the new value.

Below is my webpack.config.js

'use strict';

const webpack = require('webpack')

module.exports = {
  entry: {
    agile: './client/js/agile.jsx.js',
    vendor: [
      'domready',
      'react',
      'react-dom',
      'classnames'
    ]
  },
  output: {
    filename: '[name].bundle.js',
    path: 'public/js',
    publicPath: '/js/'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
    ]
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({names: ['vendor'], minChunks: Infinity}),
    new webpack.HotModuleReplacementPlugin()
  ],
  target: 'web',
  devtool: 'source-map',
  stats: {
    color: true,
    modules: false,
    reasons: false
  },
  devServer: {
    hot: true,
    inline: true,
    contentBase: './public/'
  }
};

Please let me know if I am doing something wrong.

I also tried to remove the HotModuleReplacementPlugin used above and ran my app without the webpack-dev-server. Neither of them worked.

Versions:

• React - 15.0.1
• React DevTools - 0.14.9
• Node - v4.4.1
• Chrome - 49.0.2623.112 (64-bit) on Mac OSX

Answer 1

I don't know if this qualifies as an answer, but I don't yet have over 50 points so I can't add a comment.

It looks like this is an issue caused by a React optimization that was first reported in January. At the end of that thread there is an open PR that is supposed to fix the issue.