Webpack-dev-server: HookWebpackError: Cannot read property 'updatedChunkIds' of undefined

[nat-davydova]

• Operating System: Windows
• Node Version: 14.15.1
• NPM Version: 6.14.10
• webpack Version: 5.11.1
• webpack-dev-server Version: 3.11.1
• Browser: Chrome 87.0.4280.141

• [x] This is a bug
• [ ] This is a modification request

Code

Gist with config and package.json

Expected Behavior

Live server compiles with hot: true and recompiles after editing code

Actual Behavior

If I run webpack via npm start it compiles, but if I change any piece of code (pug or scss or js) it fails with HookWebpackError: Cannot read property 'updatedChunkIds' of undefined

• if I remove hot: true it works as expected;
• if I remove target or pass browserlist instead of web - it still fails;
• if I try to remove hot: true and init HMR via new webpack.HotModuleReplacementPlugin() - it fails in the same manner;

For Bugs; How can we reproduce the behavior?

My full build is on github (dev branch) - you can run it and check the bug;

[alexander-akait]

Please create reproducible test repo, we don't use updatedChunkIds

[nat-davydova]

@alexander-akait I've added reproducible test repo in the start post, it is here - dev branch. Hope it'll help.

I don't know why the error exists, but everything fails only on HMR init =(

[bradharms]

I'm getting a similar issue running Webpack 5.12.3

ℹ ｢wdm｣: Compiling...                                                                                                          │    at MiddlewareSequence.handle (/private/var/reliv/web/node_modules/@loopback/rest/src/sequence.ts:291:5)
✖ ｢wdm｣: HookWebpackError: Cannot read property 'updatedChunkIds' of undefined                                                 │    at HttpHandler._handleRequest (/private/var/reliv/web/node_modules/@loopback/rest/src/http-handler.ts:115:5) {
    at makeWebpackError (/private/var/reliv/web/node_modules/webpack/lib/HookWebpackError.js:49:9)                             │  message: 'Endpoint "GET /bower_components/tinymce/skins/lightgray/skin.min.css.map" not found.'
    at /private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2198:11                                                  │}
    at eval (eval at create (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <a│
nonymous>:20:1)                                                                                                                │
    at fn (/private/var/reliv/web/node_modules/webpack/lib/Compilation.js:372:17)                                              │
    at Hook.eval [as callAsync] (eval at create (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/HookCodeF│
actory.js:33:10), <anonymous>:18:1)                                                                                            │
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/Hook.js:1│
8:14)                                                                                                                          │
    at cont (/private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2195:33)                                           │
    at /private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2241:9                                                   │
    at /private/var/reliv/web/node_modules/webpack/node_modules/neo-async/async.js:2830:7                                      │
    at Object.each (/private/var/reliv/web/node_modules/webpack/node_modules/neo-async/async.js:2850:39)                       │
-- inner error --                                                                                                              │
TypeError: Cannot read property 'updatedChunkIds' of undefined                                                                 │
    at /private/var/reliv/web/node_modules/webpack/lib/HotModuleReplacementPlugin.js:605:11                                    │
    at exports.forEachRuntime (/private/var/reliv/web/node_modules/webpack/lib/util/runtime.js:61:3)                           │
    at /private/var/reliv/web/node_modules/webpack/lib/HotModuleReplacementPlugin.js:602:9                                     │
    at fn (/private/var/reliv/web/node_modules/webpack/lib/Compilation.js:370:10)                                              │
    at Hook.eval [as callAsync] (eval at create (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/HookCodeF│
actory.js:33:10), <anonymous>:18:1)                                                                                            │
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/Hook.js:1│
8:14)                                                                                                                          │
    at cont (/private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2195:33)                                           │
    at /private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2241:9                                                   │
    at /private/var/reliv/web/node_modules/webpack/node_modules/neo-async/async.js:2830:7                                      │
    at Object.each (/private/var/reliv/web/node_modules/webpack/node_modules/neo-async/async.js:2850:39)                       │
✖ ｢wdm｣: caused by plugins in Compilation.hooks.processAssets                                                                  │
TypeError: Cannot read property 'updatedChunkIds' of undefined                                                                 │
    at /private/var/reliv/web/node_modules/webpack/lib/HotModuleReplacementPlugin.js:605:11                                    │
    at exports.forEachRuntime (/private/var/reliv/web/node_modules/webpack/lib/util/runtime.js:61:3)                           │
    at /private/var/reliv/web/node_modules/webpack/lib/HotModuleReplacementPlugin.js:602:9                                     │
    at fn (/private/var/reliv/web/node_modules/webpack/lib/Compilation.js:370:10)                                              │
    at Hook.eval [as callAsync] (eval at create (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/HookCodeF│
actory.js:33:10), <anonymous>:18:1)                                                                                            │
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/private/var/reliv/web/node_modules/webpack/node_modules/tapable/lib/Hook.js:1│
8:14)                                                                                                                          │
    at cont (/private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2195:33)                                           │
    at /private/var/reliv/web/node_modules/webpack/lib/Compilation.js:2241:9                                                   │
    at /private/var/reliv/web/node_modules/webpack/node_modules/neo-async/async.js:2830:7                                      │
    at Object.each (/private/var/reliv/web/node_modules/webpack/node_modules/neo-async/async.js:2850:39)

[alexander-akait]

@bradharms Please create reproducible test repo

[siilike]

The issue seems to be that in https://github.com/webpack/webpack/blame/master/lib/HotModuleReplacementPlugin.js#L404 runtime name (?) gets mapped to the value of records.chunkRuntime, but later, e.g. https://github.com/webpack/webpack/blame/master/lib/HotModuleReplacementPlugin.js#L466 it does not.

In my case records.chunkRuntime is { main: '*' }, so hotUpdateMainContentByRuntime will be { undefined: {...} }, but in https://github.com/webpack/webpack/blame/master/lib/HotModuleReplacementPlugin.js#L602 newRuntime is "main" instead of undefined, so it fails to look it up from the map.

@sokra, you authored the commit that broke this, please review.

[siilike]

In 5.17.0 this is working for me as in records.chunkRuntime I now have { main: 'main', admin: 'main', select: 'main' } which does not trigger the bug.

[alexander-akait]

@siilike So, problems was fixed?

[siilike]

It was not, it is only that before records.chunkRuntime was { main: '*' } which did trigger the issue (due to the handling of the asterisk) while now it does not (no entries with an asterisk value).

[nat-davydova]

@alexander-akait @siilike in my build it still doesn't work even with "webpack": "5.17.0", just fails with the very same error =(

[alexander-akait]

@nat-davydova Please create reproducible test repo

[nat-davydova]

@alexander-akait it's the same repo from the start post. I've pushed package.json with updated dependencies (including webpack -> 5.17.0) to it.

I tried today the build with updated webpack, still have this issue from the start post

[fefrei]

FYI, here's related discussion on StackOverflow: https://stackoverflow.com/q/65653773/926412

[nat-davydova]

@fefrei it is my question on stackoverflow 😆 I've tried to get an answer on stack, but then have created an issue here

[fefrei]

Indeed 🙈
(I just wanted to link this up two-way, in case more relevant info appears on SO.)

[siilike]

I actually have a different project where this issue is still present.

[alexander-akait]

@nat-davydova sorry for delay, can't reproduce it using your repo :confused:

[alexander-akait]

Anyway it happens only when your have two webpack version in the project, also optimize-css-assets-webpack-plugin is not compatibility with webpack v5, please use css-minimizer-webpack-plugin

[alexander-akait]

Why it happens? You have two verison of webpack (i.e. v4 and v5, some plugin can have webpack in deps), so npm put webpack v4 on top on node_modules and when you start webpack-dev-server (v3 it uses webpack from top, we are fixed it in v4), but plugins was initialize for v5 (inside webpack) so you got this error.

[stephanedaviet]

I also get this problem with only one version of Webpack installed, the 5.21.2, I properly check it. It seems a bit different as I get two chunks but due to the use of Web workers. I systematically get this error when modifying the function where I do the call to Web workers. I'm ready to isolate a subset of my project in a reproductible repo to investigate. Just want to know before if it's better to open a new issue (as it's related to Web workers for me) or if I can go on in this one?

[alexander-akait]

@stephanedaviet Can you create reproducible test repo?

[nat-davydova]

@alexander-akait I've updated all the modules once again, and the problem disappears =) Thank you!

[alexander-akait]

Great!

[bhollis]

Still happening for me when editing a web worker:
webpack Version: 5.27.0
webpack-dev-server Version: 3.11.2

[stephanedaviet]

I can confirm also it's still happening in 5.27.1. I'm trying to isolate the necessary and sufficient code that exhibits this behavior from my project, without success till now.
It doesn't happen for me when I alter the code of the worker, but when I alter the code of a function used in a Redux reducer that calls this worker. I don't know if Redux can or cannot get a role in this (due to reloading of reducers…).
On the simple project that I'm trying to set up, I still cannot reproduce the bug until now, but I have not yet added Redux.

[stephanedaviet]

I have taken some time to investigate the problem without success.

Here a repository where the problem happen: https://github.com/stephanedaviet/codenames. You can run npm start and then modify code depending on the Web worker, for instance, add a simple line with true; in src/reducers/board.js at line 59, it will inevitably trigger the error: TypeError: Cannot read property 'updatedChunkIds' of undefined.

Here a far more simple other repository with a subset of the first one: https://github.com/stephanedaviet/webpack-chunk-reload-error. Modifying code that depends on the Web worker in sampleReducer.js never triggers the problem…

I note some subtle differences in the log outputted by the Webpack about how it packages one and the other, butI have definitely no clue of the origin of the problem :disappointed: .

[alexander-akait]

Investigating...

[alexander-akait]

@stephanedaviet

Here a repository where the problem happen: https://github.com/stephanedaviet/codenames. You can run npm start and then modify code depending on the Web worker, for instance, add a simple line with true; in src/reducers/board.js at line 59, it will inevitably trigger the error: TypeError: Cannot read property 'updatedChunkIds' of undefined.

weird, I can't reproduce... Can you try 5.27.2? Maybe you can provide screenshot of the problem/error

[stephanedaviet]

OK, I can confirm the problem is gone in 5.27.1. I think I mangled my latest tests with the two repositories and the Webpack version. Perfect then! Thanks for the time you invest seeking for this :+1: .
Are you still interested in seeing the problem happen on some code with an older version of Webpack, just to get some insurance on its origin and the fact it has been intentionally fixed?

[alexander-akait]

Are you still interested in seeing the problem happen on some code with an older version of Webpack, just to get some insurance on its origin and the fact it has been intentionally fixed?

It was complex bug and fixed here

avoid crash when experiments.lazyCompilation is used (regression)
fix lazy compilation opt-out when HMR accept/decline is used on an import()

https://github.com/webpack/webpack/releases

Let's close, anyway if somebody faced with the problem, please update webpack to v5.27.2, if it is not help, please open an issue with reproducible test repo

[siilike]

For me 5.27.2 is still not working.

[alexander-akait]

@siilike Please create reproducible test repo

[siilike]

Started working after deleting records and making a clean build.

[fefrei]

I still sometimes get this with Webpack 5.36.0 and Dev Server 3.11.2. Unfortunately, it reproduces pretty inconsistently, and I haven't managed to shrink this down to a reproducible test 😦

[alexander-akait]

Run npm ls webpack and also check you don't have HotModuleReplacementPlugin if you have hot: true for dev server options.

[fefrei]

npm ls webpack says:

[email protected] C:\Users\felix\git\my-app\webapp
`-- [email protected] 

I do have hot: true, I don't use myself HotModuleReplacementPlugin (but is is in node_modules\webpack\lib\HotModuleReplacementPlugin.js, apparently).

[alexander-akait]

Does this problem happens when you use webpack serve?

[fefrei]

Yes, I'm running webpack serve --mode=development (via an npm run).

The scenario is (as in the original issue description) that initial compilation always works, and then when I my code, _some_ changes cause this error (and then Webpack needs to be restarted to work properly again). Other changes work fine.
The issue is reproducible in the sense that starting from the same code, starting Webpack and then making the same change appears to always yield the same result – but I found no pattern as to which changes trigger this.

(Also see my edit above.)

[alexander-akait]

Looks you have something bad in plugins (maybe two/more plugins applied)... Can you provide example?

[fefrei]

I can't share my full repository (at least not publicly, sorry). My plugins configuration is rather simple:

    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {from: "./public/*", to: "./[name][ext]"}
            ]
        }),
        args.mode === 'production' ? new WorkboxPlugin.GenerateSW({
            swDest: "./sw.js",
            maximumFileSizeToCacheInBytes: 1024 * 1024 * 50
        }) : new CopyWebpackPlugin({
            patterns: [
                {from: "./src/suicide.sw.js", to: "./sw.js"}
            ]
        })
    ],

Note that my issue occurs in in development mode, so WorkboxPlugin isn't actually being used.

[siilike]

This issue is triggered by having an asterisk value in records.chunkRuntime, e.g. { main: '*' }.

Find out in which cases it is so and you should be able to reproduce this nicely.

[fefrei]

Regarding plugins: While my app doesn't _run_ without plugins (because index.html will be missing), it does _build_ without it: I can actually reproduce this with plugins: [] and no plugin being require()'d in webpack.config.js.

This issue is triggered by having an asterisk value in records.chunkRuntime, e.g. { main: '*' }.

I'm pretty clueless about Webpack internals, so this doesn't help me much. The closest thing I've touched is setting chunkFilename: '[name].bundle.js'.

For reference, the full Webpack configuration is here: https://gist.github.com/fefrei/034ec713f79e0eb24332bdd67237d01a

[alexander-akait]

Weird, maybe you can create simple example?

[fefrei]

Well, that's the problem: I can't find any pattern as to when this triggers, and I've never seen this trigger for small examples.

But: Given that this seems related to chunking, and inspired by the details given by @siilike, I read around in the docs:

non-initial is a chunk that may be lazy-loaded. It may appear when dynamic import or SplitChunksPlugin is being used.

I do not use SplitChunksPlugin, but I _do_ use lazy loading. Wanna guess where the code I change to trigger this bug is located? Yep, it's lazy-loaded, like so:

    "pseuco-testing": {
        title: "pseuCo – Testing",
        getComponent: async (): Promise<InteractiveComponent> => {
            return (await import('./pseucoTesting/pseuCoTesting')).default;
        }
    },

Thinking about it, I cannot recall fighting with this when changing code that is in the main, non-lazy-loaded part.

Does that help? I might try to create a minimal example again using lazy loading, but I'm not sure whether that'll work.

[alexander-akait]

Does that help? I might try to create a minimal example again using lazy loading, but I'm not sure whether that'll work.

Yes, will be great, also please an new issue, original problem look like the same, but I don't think this. And what is webpack-dev-server version?

[fefrei]

After quite some juggling of my codebase, I finally got a reduced example I can share. I've linked it (and collected the relevant version numbers) in #3233.
Thank you for your help getting to this point!