React-hot-loader: Stateful components don't re-render with on hot-reload.

[jonjaques]

Hello,

I don't know how I failed to notice this before, but it looks like my stateful (class-based) components fail to re-render upon loading an update through webpack. Stateless fn's work fine.

Is this expected behavior? I thought it might have been related to [email protected], but that isn't the case.

[jonjaques]

Hmmm, interesting. So I've nailed this down to a webpack config "issue", not sure which project's responsibility this falls to however.

Here is my entry config and the source of the problem. I was experimenting with the webpack CommonsChunk plugin, in an effort to speed up builds.

The issue only crops up with the split vendor bundle. I'm going to try adding react-hot-loader/patch to the vendor bundle to see if that has any effect.

  entry: 
   { client: 
      [ 'webpack-hot-middleware/client',
        'webpack/hot/only-dev-server',
        'react-hot-loader/patch',
        'file?name=styles.css!./assets/scss/index.scss',
        './app/client' ],
     vendor: 
      [ 'flux-standard-action',
        'isomorphic-fetch',
        'qs',
        'react',
        'react-cookie',
        'react-dom',
        'react-helmet',
        'react-redux',
        'react-router',
        'react-router-bootstrap',
        'react-router-redux',
        'redux',
        'redux-actions',
        'redux-connect',
        'redux-promise',
        'use-scroll-behavior' ] },

[jonjaques]

Whoop whoop! 🎉

Adding react-hot-loader/patch as the first require to the vendor entry did the trick.

[blade254353074]

@jonjaques Oh my god, you save me!
After your remind, I found `react-hot-loader/patch must load before your codes` mean.

It means react-hot-loader/patch must load before your own codes, whatever vendor, entry, common, must before them.

...
vendor: ['react-hot-loader/patch', 'babel-polyfill', 'react', 'react-dom', 'react-router', 'react-tap-event-plugin'],
...

[strobox]

Have the same issue with config looked like this
`
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client',
'./src/index'
]
,

If I'll change What I should put to vendor? Thanks.

[jonjaques]

Checkout the webpack.optimize.CommonsChunkPlugin. Btw the interface used here is for webpack@2, but this should work just fine with [email protected]

You config would look something like this; biggest change is you need to change the entry value to an object instead of array.

entry: {
  app: [
    'react-hot-loader/patch',
    'webpack-hot-middleware/client',
    './src/index'
  ],
  vendor: [
    'react-hot-loader/patch',
    ...
  ]
},
output: {
  filename: '[name].js'
},
...
plugins: [
  new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' })
]

This would output two files, vendor.js and app.js, which need to be loaded in that order.

I'm actually not sure if you need the patch file in both entry chunks. Will do some testing...

[strobox]

@jonjaques My respect to you colleague! In fact my problem was in incorrect React Hot loader 3 setup related to import { AppContainer } from 'react-hot-loader'; .

I successfully setup webpack.CommonsChunkPlugin. and in my case 'react-hot-loader/patch', in vendor not needed. All works fine.

By the way, webpack.CommonsChunkPlugin is really awesome. One thing that I should append for others readers - don't forget to add following part to webpack config (export vendor modules variables):

// ..... for example:
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        React: 'react',
        ReactDOM: 'react-dom',
        DataTable: 'datatables.net'
    }),
//.....

Docs references:
CommonsChunkPlugin
Split app and vendor code