React-hot-loader: Document that react-hot-loader v4 is incompatible with ExtractTextPlugin

[robwierzbowski]

I just spend a couple hours debugging why RHL 4 beta wasn't applying hot reloading recursively. I ended up figuring out from another GitHub issue that the problem was ExtractTextPlugin. Do you think it's worth documenting the common plugins RHL is incompatible with in the readme?

[theKashey]

Do you think it's worth documenting the common plugins RHL is incompatible with in the readme?

No, I think it's worth to understand why it is not working, and then fix.
Do you have more information related to this case?

[robwierzbowski]

Sure.

Using v4 beta 15, Webpack 3, webpack dev server.

Config contained the following (sorry, cannot share complete, it's from work):

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ew ExtractTextPlugin({
      filename: 'style.css',
    }),

    new HtmlWebpackPlugin({
      template: './dev/index.html',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['babel-loader'],
      },
  },

HMR + RHL were doing full reloads on change for every module except the ones I exported with export default hot(module)(MyModule). Those reloaded in place.

After removing ExtractTextPlugin, I only needed to add export default hot(module)(App) to the root component for hot module reloading of every component.

I removed ExtractTextPlugin based on this comment: https://github.com/gaearon/react-hot-loader/issues/687#issuecomment-338857271.

[theKashey]

Yep. This is a tricky moment we could not mitigate. A module could have more than one parent, and all the parents should accept the change. And ExtractTextPlugin (or and CommonModulePlugin) creates that "parent" which do not accept the change.
Please double check your console, there might be information about module acceptance.

This is actually not related to RHL, but you are right - we should document this sort of problem.

[Bnaya]

A common practice is to disable ExtractTextPlugin in dev mode

      new ExtractTextPlugin({
        filename: "styles/[name].[contenthash].css",
        disable: !isProduction,
      }),

[gregberge]

Documented in v4.0.0-beta.17.