react-webpack-rails-tutorial: HMR doesn't rerender components extended from BaseComponent

I’ve used foreman start -f Procfile.dev to start the server, went to localhost:3000. Opened Layout.jsx and tried changing some text, but nothing happened in the browser even though I see in the terminal that webpack sends the hot-update. Then I tried replacing extends BaseComponent with extends React.Component which basically means I made shouldComponentUpdate always return true. After these changes modifying Layout.jsx was instantly reflected in the browser. Something is definitely wrong since HMR should do .forceUpdate() for every changed component and rerender the component ignoring the shouldComponentUpdate.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 17 (9 by maintainers)

Commits related to this issue

Enable hot reloading See discussion: https://github.com/shakacode/react-webpack-rails-tutorial/issues/245 — committed to shakacode/react-webpack-rails-tutorial by justin808 8 years ago
Enable hot reloading See discussion: https://github.com/shakacode/react-webpack-rails-tutorial/issues/245 — committed to ryanbelke/rails-react-yourtime by justin808 8 years ago
Enable hot reloading See discussion: https://github.com/shakacode/react-webpack-rails-tutorial/issues/245 — committed to joseph0919/React_Webpack_Rails_Tutorial by joseph0919 8 years ago

Most upvoted comments

@justin808 will check if this is the fix.

seoyoochan on Mar 17, 2016

@marz0 In this case the line should be added to webpack.client.rails.hot.config.js like

{
  test: /\.jsx?$/,
  loader: 'babel',
  exclude: /node_modules/,
  query: {
    plugins: [
      [
        'react-transform', {
          superClasses: ['React.Component', 'BaseComponent', 'Component'],
          transforms: [
            {
              transform: 'react-transform-hmr',
              imports: ['react'],
              locals: ['module'],
            },
          ],
        },
      ],
    ],
  },
},

igor10k on Mar 16, 2016