HMR doesn't rerender components extended from BaseComponent

[igor10k]

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.

[justin808]

@igor10k Keep me posted on what you find out. If you figure out a good change, please submit a PR.

I've tested the hot reloading and changing the the JSX in the render method, and hot reloading works great.

[igor10k]

@justin808 I made a 1-minute video showing the process and the difference when using BaseComponent and React.Component for Layout.jsx. I cloned the tutorial repo about 3 days ago, so it's quite fresh. I do a manual refresh in the video just once after I change BaseComponent to React.Component (and accidentally click the readme link 😃 ).

https://dl.dropboxusercontent.com/u/2526191/react_on_rails_hmr.mov

Maybe you are doing some other changes that do trigger the hot reloading.

[justin808]

@igor10k We're not doing anything in particular. This sounds like a bug in the hmr.

[igor10k]

@justin808 so are you having the same behavior?

[igor10k]

@justin808 gaearon/react-transform-boilerplate#123

Fixed HMR by adding "superClasses": ["React.Component", "BaseComponent"] to the babel config.

[justin808]

👏 Nice job @igor10k. Any chance that you can throw that in a document PR here: https://github.com/shakacode/react_on_rails/tree/master/docs/additional_reading

We can call the file "hot-module-replacement.md".

Thanks!

[igor10k]

I don't think that there's a need for another doc. How about just adding that superClasses line to the config and adding a comment above describing it. Something like "Enable rerendering of the components extended from BaseComponent" should be enough.

[justin808]

shakacode/react_on_rails#332 discusses the issues.

[marcelkooi]

I copied down the repo yesterday and I'm seeing the same issue. Changing the BaseComponent to React.Component fixed the problem. @igor10k Are you saying that you added that line to your .babelrc file? I seem to get an error when I do that.

[igor10k]

@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]

Btw, I decided to get rid of BaseComponent in favor of pure-render-decorator because there are also other things that depend on using the original class like eslint-plugin-react and I don't favor the idea of configuring every single plugin to work with BaseComponent.

[justin808]

@seoyoochan Maybe this contains the fix we need?

[seoyoochan]

@justin808 will check if this is the fix.

[justin808]

@seoyoochan Any update?

[seoyoochan]

@justin808 this was not related to my issue, stylesheet hrm rendering. It seems application_non_webpack.scss needs to be watched and hot reloaded.

[LinuCC]

This really is a one-liner with the change to webpack.client.rails.hot.config.js @igor10k proposed, or a bit more (plus another babel-plugin) with the decorator.

Which of those two would you prefer, @justin808?

[justin808]

I'm going to try out the one liner change to the config.js file and merge that if it works for me.