Support Webpack DLL

[marcellomontemagno]

Hi, thanks for this amazing tool, here an issue I have when react-hot-loader is included as a webpack DLL.

Description

react-hot-loader fails to replace a component that has shouldComponentUpdate returning false if and only if react-hot-loader is included into the webpack DLL

Expected behavior

react-hot-loader should replace the component

Actual behavior

react-hot-loader detects the changes and log that has done its job in the browser console but what is displayed on the screen is not updated

Versions:

react-hot-loader: 3.0.0-beta.7 node: v7.10.0 npm: 4.2.0 OS: OS X 10.10.5 Chrome: 60.0.3112.101

Reproducible Demo

https://github.com/marcellomontemagno/hot-reload-test

Workaround

The workaround for this issue is to not include react-hot-loader in your webpack DLL

[theKashey]

This is expected behaviour. As long React-Hot-Loader rely on babel's magic - you have to had that pass. React-hot-loader will not work nor for "node_modules", nor for DLL plugin. You also can not enable babel/webpack-plugin for "all the files", cos they both work for a top level exports or variables.

But RHL is only for (hot)replacing old React components. Everything(EVERYTHING) must work even without it - you will just loose internal component state due to tree re-render. If not - check HRM settings.

[marcellomontemagno]

Hi @theKashey, thanks for your reply, I'm not sure I understood the impediment there, in the demo I posted the component that is not replaced is transpliled by babel.

I'm not trying to make RHL work for all the files, I'm not expecting it to replace components present in "node_modules" or DLLs and I don't rely on it for business logic, as you said everything must work even without it.

What I'm telling is that if the source code of the RHL library is part of the DLLs it fails to work silently and only in some "border case" like the shouldComponentUpdate returning false.

If some Impediment is present preventing RHL to work properly when included as a DLL it would be enough to print a warning saying to remove RHL from the DLLs (or to signal the root cause of the problem) to consider this issue closed for me.

I opened this issue so that somebody else having the same problem might find it and lose less time than me trying to identify the cause.

I understand that there are thousand of possible configurations achievable with webpack and that DLLs might also be a border case so I expect this issue to have low priority.

[Kannnnng]

same question……

[wmertens]

I have a similar thing - I automatically bundle all node_modules that the client needs into a DLL (by building without and looking at the dependencies in the webpack stats), but I exclude .*hot.*. However, I'm seeing the same symptoms. So perhaps there is a dependency of RHL that causes this problem…

[wmertens]

actually, no, when I disable DLLs altogether it's still not working :(

[wmertens]

Found it for me - I was accepting reload of a child but not actually require()-ing it and that caused it to not actually update. You don't need to assign the require() to anything, so you can keep the original import, but you do need to do the require().

Anyway, nothing to do with this issue :)

[gregberge]

I think we could resolve this issue by adding it in the documentation.

[sorenhoyer]

@neoziro @theKashey This seems to still be an issue. Any chance we could re-open this issue, until a section has been added to the docs?

[jrmyio]

Seems like hot reloading just no longer works the moment I add a DLL (even if the DLL only contains a harmless module like "classnames").

Edit: Looks like this specific issue of nothing happening was related to DLLPlugin itself. Somehow I have to use --inline in webpack-dev-server to bootstrap the HotModuleLoading. Still need to test with react-hot-loader though.

[theKashey]

I'll take a look. I hope initial repo, @marcellomontemagno created 2 years ago, is still valid to reproduce a problem.

[jrmyio]

@theKashey Looks like my above comment was related to DLLPlugin itself. Somehow I have to use --inline in webpack-dev-server to bootstrap the HotModuleLoading. Still need to test with react-hot-loader though.

Ok, for me things are working using the latest versions of webpack, webpack-dev-server and react-hot-loader.

Unlike OP I am defining the modules in the DLL by hand.

[theKashey]

Call me if you need a hand.

[JSupot]

I also met the same problem. I remove React-hot-loader from dll file, then hot reload works again.