NodeServices fails to start with WebPack 4

[veikkoeeva]

Functional impact

ASP.NET Core 2.0 application fails to start with the following error messages printed to the console:

fail: Microsoft.AspNetCore.NodeServices[0]
      (node:19268) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly 
fail: Microsoft.AspNetCore.NodeServices[0]
      (node:19268) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Minimal repro steps

Create ASP.NET Core 2.0 application "normally" and do Install-Package Microsoft.AspNetCore.SpaServices -Version 2.0.2 and when yarn add webpack@next webpack-cli --dev or npm install webpack@next webpack-cli --save-dev has been done to update to WebPack 4.0.

Expected result

One could run the system without taking specific extra steps. :)

Please provide quickly an update Nuget package as it appears (hearsay) many are transitioning to WebPack 4.0 as it appears to be stable enough and it seems like it's encouraged to be used to weed out bugs.

Actual result

The applications fails to start in

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions

as described in Functional impact. Further, the exception trace (in this case Aurelia) is as follows

TypeError: Cannot read property 'bind' of undefined
    at compiler.plugin (C:\projects\AureliaDemo\AureliaDemo\node_modules\aurelia-webpack-plugin\dist\ModuleDependenciesPlugin.js:36:63)
    at _err0 (eval at create (C:\projects\AureliaDemo\AureliaDemo\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at compiler.hooks.beforeCompile.tapAsync (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\DllReferencePlugin.js:40:12)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\projects\AureliaDemo\AureliaDemo\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\projects\AureliaDemo\AureliaDemo\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.compile (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Compiler.js:427:28)
    at compiler.hooks.watchRun.callAsync.err (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Watching.js:74:18)
    at _err0 (eval at create (C:\projects\AureliaDemo\AureliaDemo\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at compilerInvalid (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack-dev-middleware\lib\Shared.js:161:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\projects\AureliaDemo\AureliaDemo\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\projects\AureliaDemo\AureliaDemo\node_modules\tapable\lib\Hook.js:35:21)
    at Watching._go (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Watching.js:39:32)
    at Watching.compiler.readRecords.err (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Watching.js:31:9)
    at Compiler.readRecords (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Compiler.js:324:11)
    at new Watching (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Watching.js:28:17)
    at Compiler.watch (C:\projects\AureliaDemo\AureliaDemo\node_modules\webpack\lib\Compiler.js:161:10)

not tested, but could be the same for other SPA templates too.

Further technical details

Windows 10, VS 2017 15.5.5, latest WebPack (as described) and latest Yarn all packages either upgraded or not. The WebPack 4.0 Announcement.

[veikkoeeva]

Edited the heading to reflect Aurelia SPA template was used together with WebPack 4.0.

[SteveSandersonMS]

This is not something we currently have plans to support, because our templates are moving away from using Webpack directly, and towards using the CLI tools supplied by each SPA framework (e.g., Angular CLI and create-react-app).

That said, Webpack 4 is only at beta stage so far, and it's quite likely they will improve back compatibility with Webpack 3 before they ship. If it turns out that we need to make changes to aspnet-webpack or similar when Webpack 4 is finalised we'll certainly look at that.

[veikkoeeva]

@SteveSanderson Good to know. 👍 I'll make a reference to Aurelia CLI, just in case. :)

[veikkoeeva]

I'll page @EisenbergEffect, just in case, to make sure there's enough visibility for this change to come.

[EisenbergEffect]

@SteveSanderson How can we work with you to start utilizing our Aurelia CLI directly?

[SteveSandersonMS]

@EisenbergEffect We'd ask the Aurelia team to ship its own template based on dotnet new extensibility now that we're discontinuing the Microsoft.AspNetCore.SpaTemplates package. This will give you the flexibility to present whatever developer experience is best. Being in Microsoft.AspNetCore.SpaTemplates was never very useful for Aurelia since it didn't ship in the SDK, wasn't officially supported, and very few people got (compared with the templates that do ship in the SDK).

[veikkoeeva]

For the benefit of later readers, Dotnet templates is a rather exhaustive listing of templates (see also https://github.com/dotnet/templating/wiki/Available-templates-for-dotnet-new).

[EisenbergEffect]

It's rather disappointing that you wouldn't rather choose to promote more into the SDK rather than just shut existing templates down. In the least, one would think you all would work to migrate things over to the new templates. I personally don't have interest to go learn someone else's CLI extensibility model particularly after they just actively pressed "delete" on the previous integration point. Very not cool.

[paulirwin]

Webpack 4 has been released, and I cannot seem to get it to work with SpaServices 2.0.2. Should this be a separate issue?

[veikkoeeva]

I'm a tad late with this, but as per the original issue and Aurelia, @jods4 writes in http://aurelia.io/

We released aurelia-webpack-plugin@3.0.0-rc.1 which is compatible with (and requires) Webpack 4. The major version bump is to prevent an automatic upgrade from 2.0.0-rc.5, which you should continue to use if you're still on Webpack 3.

I'll leave here for the benefit of search engine queries. :)

[cvanem]

@SteveSandersonMS

That said, Webpack 4 is only at beta stage so far, and it's quite likely they will improve back compatibility with Webpack 3 before they ship. If it turns out that we need to make changes to aspnet-webpack or similar when Webpack 4 is finalised we'll certainly look at that.

With the release of Webpack 4 and React Hot Loader 4, are there any plans to update aspnet-webpack and aspnet-webpack-react accordingly? We are looking for solutions to upgrade our project, which was built on the original React Redux SPA Template, but have come up empty handed so far.

For aspnet-webpack-react, it appears the react-hot-loader/webpack loader has been removed in the React Hot Loader 4 release. I'm assuming aspnet-webpack will also need to be updated as we couldn't get it to work and it appears other people are having issues as well. Any insight would be appreciated.

[benrhere]

@SteveSandersonMS

This is not something we currently have plans to support, because our templates are moving away from using Webpack directly, and towards using the CLI tools supplied by each SPA framework (e.g., Angular CLI and create-react-app).

I don't follow this. I have an app that I built months ago based on the React/Redux template (similar to @cvanem perhaps). Are you suggesting that there's some mechanism that we migrate our current apps onto such that they no longer need Webpack to compile our code?

[cvanem]

@benrhere FYI, I was able to get Webpack 4 working with limited functionality using aspnet-webpack-react 3.0.0 and react-hot-loader 3.13. Support for react-hot-loader 4 should be added soon. Details here: https://github.com/aspnet/JavaScriptServices/issues/1585.

The new react-redux template uses create-react-app, which includes WebPack. If you want to match the template structure, you could modify your existing project to use create-react-app. If you don't want to use create-react-app in your project, then you will need to maintain and update your packages yourself. Keep in mind you can always download the template and run the eject command on the create-react-app if you want to see what it looks like with all the packages broken out. This helped me out when updating my project. Hopefully this helps.