Webpack version 5 HMR not work

[caoyi5225]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

Webpack v5 HMR not work

🔬 Minimal Reproduction

• ng new ng11_demo1
• add "resolutions": { "webpack": "5.24.4" } in package.json and update all angular dependencies to 12.0.0-next.4 and "@angular-devkit/build-angular" to 0.1200.0-next.4
• yarn
• yarn ng serve --hmr
• modify "Welcome" to "Welcome1" in app.component.html

🔥 Exception or Error

The page doesn't change automatic and console this error:

Uncaught TypeError: Cannot read property 'push' of undefined
    at self.webpackHotUpdateng11_demo1 (jsonp chunk loading:51)
    at runtime.afd237f104deb82b7462.hot-update.js:1
self.webpackHotUpdateng11_demo1 @ jsonp chunk loading:51
(anonymous) @ runtime.afd237f104deb82b7462.hot-update.js:1

And when I refresh page，one more error:

Uncaught TypeError: Cannot set property '9229' of undefined
    at self.webpackHotUpdateng11_demo1 (jsonp chunk loading:47)
    at main.afd237f104deb82b7462.hot-update.js:1
self.webpackHotUpdateng11_demo1 @ jsonp chunk loading:47
(anonymous) @ main.afd237f104deb82b7462.hot-update.js:1

🌍 Your Environment

Angular CLI: 12.0.0-next.4
Node: 14.15.0
OS: darwin x64

Angular: 12.0.0-next.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0-next.4
@angular-devkit/build-angular   0.1200.0-next.4
@angular-devkit/core            12.0.0-next.4
@angular-devkit/schematics      12.0.0-next.4
@schematics/angular             12.0.0-next.4
@schematics/update              0.1200.0-next.4
rxjs                            6.6.6
typescript                      4.0.7

[johncrim]

I'm seeing the same on angular 11 with webpack 5.

With the --hmr arg, I can run the app, but have to refresh after every update to run the new code, and I see this error on every update.

If I exclude the --hmr arg, I can run the app, but have to refresh after every update to run the new code.

Angular CLI: 11.2.4
Node: 15.9.0
OS: win32 x64

Angular: 11.2.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.4
@angular-devkit/core            11.2.4
@angular-devkit/schematics      11.2.4
@angular/cdk                    11.2.4
@angular/cli                    11.2.4
@schematics/angular             11.2.4
@schematics/update              0.1102.4
ng-packagr                      11.2.4
rxjs                            6.6.6
typescript                      4.1.5
webpack                         5.26.0

[vinayakpatil]

Any possible workaround?

[johncrim]

Yes: keep running (F5/F8) after the error occurs. And hit refresh after code changes to reload the page, then F5/F8 again to continue running after this error.

It's possible the behavior is different in ng12, but this works for me (ng11 + webpack 5).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}