Skip to content

Webpack version 5 HMR not work聽#20288

Description

@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锛宱ne 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

Activity

  1. modified the milestone: Backlog on Mar 16, 2021
  2. johncrim commented on Mar 17, 2021

    @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
    
  3. vinayakpatil commented on Mar 24, 2021

    @vinayakpatil

    Any possible workaround?

  4. johncrim commented on Mar 24, 2021

    @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).

  5. changed the title [-]Webpack v5 HMR not work[/-] [+]Webpack version 5 HMR not work[/+] on Apr 8, 2021
  6. linked a pull request that will close this issueUpgrade tooling to use Webpack 5 #20466on Apr 8, 2021
  7. angular-automatic-lock-bot commented on May 9, 2021

    @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.

  8. locked and limited conversation to collaborators on May 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions