Repository navigation
aspnet-webpack-react not compatible with react-hot-loader v4 #5178
Description
Activity
For users still using react-hot-loader v3, they would be able to use this new version by adding react-hot-loader/patch to their webpack conf manually. No?
By doing some test, it seems that the module react-hot-loader/webpack has been removed too...
const reactHotLoaderWebpackLoader = 'react-hot-loader/webpack';
The safest solution to this might be to check if the
react-hot-loader/patchorreact-hot-loader/webpackpackages exist before injecting them into the webpack config. Then we won't break compatibility with v3. Would something like this work?function npmModuleIsPresent(moduleName: string) { try { require.resolve(moduleName); return true; } catch (ex) { return false; } }Would something like this work?
It looks like it would avoid the initial exception, but I'm not sure it solves the issue that HMR wouldn't work. Do you have an idea about how that should be changed for v4?
In the migration instructions for migrating from v3 to v4, the only mention of changes to webpack config is the removal of
react-hot-loader/patch: https://github.com/gaearon/react-hot-loader#migrating-from-v3There is also a working example setup for HMR with Typescript that can be referenced: https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript
The only notable thing in that sample Webpack config is adding
babel-loaderbefore the Typescript loader which I think we are already doing: https://github.com/aspnet/JavaScriptServices/blob/02beb11a5c1a0f5a32e2345b0708a323c166627e/src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts#L116It looks like it would avoid the initial exception, but I'm not sure it solves the issue that HMR wouldn't work. Do you have an idea about how that should be changed for v4?
I would like to add that by removing the following lines (along with usage of variables) from HotModuleReplacement.ts I was able to successfully use webpack 4 & HMR inside of the ASPNET CORE React/Redux template site.
var reactHotLoaderWebpackLoader = 'react-hot-loader/webpack'; var reactHotLoaderPatch = 'react-hot-loader/patch';If thats the case then @mark-monteiro suggestion of conditionally invoking may just work. Can anyone else confirm this resolves their issue?
Reacted by Patrik Singer, David Jensen and Shaun LuttinIt resolved it for me too.
When I tested the change it also worked for me as well, but I didn't want to comment on that because I ran through it very briefly and didn't test anything very thoroughly.
That being said, is it fair to say that this would be a good change to make regardless of the status of compatibility with v4? It seems like a prudent measure to make sure a package is installed before trying to use it.
If we make this change then we maintain backwards compatibility without totally breaking people's builds when they try to update to v4 as is the case now. If there is any further configuration changes required for v4 compatibility, then at least there will be the option to make those Webpack config changes manually.
Has the change been implemented yet? If not, where would be the proper place to add/call the "npmModuleIsPresent" function?
Tried @rydergillen-compacSort solution, worked for me too!
Any updates on this issue? 🙏
Reacted by bot, Samuel Lie, Stéphane S., Tomasz Jaskula, Iouri Khramtsov and Ahmetany solution doesn't work for me. Would be good to release a new version compatible with react-hot-loader v4
Reacted by David Jensen, Andrey Patseiko, mateusz-rokita, Ahmet and John Stephen MangamReacted by David Jensen@SteveSandersonMS I hate to bug you, but would it be possible to get this PR merged, assuming there is nothing holding it up? We have been waiting a while and it would be nice to be able to upgrade. The proposed solution works for myself and others as described above. Is there anything holding this up?
Reacted by David Jensen, Yitzchok Gottlieb, Ricky Hartmann, neilst, Dmitry Veresov, mateusz-rokita, Sebastian Ilves, Ahmet, mrjack88, YannDeck and 11 moreAny updates on this?
Reacted by David Jensen and Keith UrquhartSeems like this is now fixed, and is working for me aspnet/JavaScriptServices#1675 (comment)
Reacted by David Jensen and Chris Van EmmerikClosing as this seems to be resolved now.
- ghost locked as resolved and limited conversation to collaborators
on Dec 4, 2019
Hello,
react-hot-loader/patch has been removed from react-hot-loader v4: See documentation here
A new package for aspnet-webpack-react (v4.0.0?), removing support of "reactHotLoaderPatch", need to be created I suppose.
To remove?
To remove?
react-hot-loader release note