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

Flog

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.

Roderich

Thanks for pointing me to the GitHub item and PR. I think there is a fix in but not yet released. – Flog