Updating aspnet-webpack-react to work with react-hot-loader v4

[tjaskula]

This should solve the issue #1585

• Deleting references to react-hot-loader/webpack and react-hot-loader/patch as it was removed in v4 of react-hot-loader. Referencing react-hot-loader/babelin webpack configuration is enough.
• Bumping peer dependency of webpack to 3 and 4

[dnfclas]

All CLA requirements met.

[SteveSandersonMS]

@natemcmaster I'll look at releasing this. Note that since it's purely a change to an NPM package, it doesn't need to be in any ASP.NET Core release milestone. We can ship NPM package changes at any time; they don't go into ASP.NET Core releases.

@tjaskula Since you're dropping support for Webpack 2 and 3, by removing the reactHotLoaderPatch (etc), shouldn't the peerDependencies allow only Webpack 4, rather than allowing Webpack 2/3/4? Also could you please bump up the major version of aspnet-webpack-react itself to 4.0.0, because this is a semver-major breaking change.

[natemcmaster]

Thanks for taking a look @SteveSandersonMS.

Side note: I was playing around with this over the weekend at seemed to me like improvements to react-hot-loader and webpack 4 make aspnet-webpack-react unnecessary. I got hmr working just fine without it. I'm not proposing anything...just pointing out that I couldn't figure out what aspnet-webpack-react was supposed to do.

[SteveSandersonMS]

@natemcmaster Were you using the SPA templates from ASP.NET Core 2.0 or later? If so, you're not using aspnet-webpack-react at all. It's only used by pre-2.0 templates.

[natemcmaster]

I see, makes sense. I was setting up hmr with ASP.NET Core 2.1 on an old hobby project I was upgrading from ASP.NET 4. I didn't see HMR in the latest SPA templates so wasn't sure what to do.

[tjaskula]

@SteveSandersonMS Thanks for suggestions. I'll target Webpack 4 only which will be related to the changes.
@natemcmaster You mean you made working HMR and ASP.NET core (on kestrel) without this module? I don't remeber now but it seems that enabling HMR yielded an error thus this PR.

[natemcmaster]

You mean you made working HMR and ASP.NET core (on kestrel) without this module?

@tjaskula yes. It may require updating to the latest versions of webpack and react-hot-loader, but I got it working just fine without aspnet-webpack-react. I wrote up a quick demo and post about this https://natemcmaster.com/blog/2018/07/05/aspnetcore-hmr/

[tjaskula]

@natemcmaster I checked what was different in my configuration and realized that in ASP.NET Core I had this configuration:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, ReactHotModuleReplacement = true, ProjectPath = System.IO.Path.Combine(env.ContentRootPath, "../") }); 

Notice the flag ReactHotModuleReplacement = true. When this is set, the aspnet-webpack-react dependency is loaded with an error described in the issue #1585.

When I comment out ReactHotModuleReplacement the error goes away (I'm also using ASP.NET Core 2.1)

My point is that, if you're using ASP.NET Core 2.1, just go without aspnet-webpack-react and ReactHotModuleReplacement flag. (as @SteveSandersonMS mentioned it above)

For ASP.NET Core < 2.0 this PR might be of value.

I'm making changes to the PR as requested above.

[cvanem]

@tjaskula Thanks for clearing this up. Removing aspnet-webpack-react and REactHotMudleReplacement = true resolved my error and HMR still functions as expected.

[tjaskula]

@natemcmaster do sourcemaps works for you ? I noticed that for me it doesn't load properly in Chrome

[natemcmaster]

Yeah, I got those working with the inline-source-map devtool and awesome-typescript-loader.

[tjaskula]

All is ok, I was using webpack.SourceMapdevtoolPlugin which seems broken. Swtiching to detool: inline-source-map seems fixing the issue.

[tjaskula]

I've pushed the required changes. Please review if this is ok.

[Tsourdox]

Really need this one. What's the eta for reviewing this PR?

[Eilon]

@SteveSandersonMS ?

[SteveSandersonMS]

Thanks for the prompt. This is now merged and published as aspnet-webpack-react@4.0.0.