Webpack 5.beta.11: HMR error Cannot read property 'getModuleIndex2' of undefined

[Levdbas]

• Operating System:
• Node Version: 13.3
• NPM Version: 6.13.1
• webpack Version: 5.0.0-beta.11
• mini-css-extract-plugin Version: 0.9

HMR code

{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            sourceMap: CreateSourceMap,
                            hmr: watchMode,
                            reloadAll: true,
                        },
                    },

Expected Behavior

1. Run webpack in watchmode with HMR
2. compile css, no issue
3. rerun, no issue :)

Actual Behavior

1. Run webpack in watchmode with HMR
2. compile css, no issue
3. rerun, issue :(

TypeError: Cannot read property 'getModuleIndex2' of undefined at MiniCssExtractPlugin.renderContentAsset ([...]/node_modules/mini-css-extract-plugin/dist/index.js:301:27)

It seems that getModuleIndex2 is deprecated in webpack 5. I don't know if this plugin is already compatible. If needed I can create a repo with minimal code.

[alexander-akait]

Yes, please create reproducible test repo?

[Levdbas]

Hi @evilebottnawi , I've tried to make the repo as small as possible: https://github.com/Levdbas/webpack-mini-css-extract-plugin-hmr-error

While doing that I found out that removing new webpack.HotModuleReplacementPlugin(), from the webpack.config.js fixes the issue. But disables the HMR altogether. I have too little insight on how the HMR actually works in the background to pinpoint where the problem lies. Is it the webpack.HotModuleReplacementPlugin() or something with mini-css-extract-plugin. I am kind of at a stale here. Please let me know if I can help you pinpoint this any further.

It even might have something to do with my PR to fix the working of this plugin with Webpack 5 altogether: webpack/webpack#10127

[fivethreeo]

getModuleIndex2 is deprecated but still exists, this is a problem with groupsIterable being a empty array

[fivethreeo]

Seems like HotUpdateChunk has no ChunkGroups to me. Can we just skip some checks if it is a HotUpdateChunk. Not sure the ChunkGroups matter in a hot update.

[infime]

@fivethreeo I would be happy to test any fix you are able to come up with. 😄

[fivethreeo]

Error seems to be gone in webpack@beta.13 but there are new errors about ordering

[fivethreeo]

Strange, unable to reproduce bug now, even in beta.11

[infime]

I am fairly certain I saw the exact same issue with hmr but quickly went back to v4.

…

On Mon, Mar 2, 2020, 10:36 Øyvind Saltvik ***@***.***> wrote: Strange, unable to reproduce bug now, even in beta.11 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#487?email_source=notifications&email_token=AOOOHG5FYR7XOIS7753RYTTRFPHADA5CNFSM4KA566QKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPYJRI#issuecomment-593462469>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOOOHG4KXW24VBQMVYC7OTTRFPHADANCNFSM4KA566QA> .

[fivethreeo]

Me too, quite sure I saw it

[fivethreeo]

https://github.com/fivethreeo/webpack-mini-css-extract-plugin-hmr-error/runs/480665334?check_suite_focus=true

But, working fine here, see the run above

[infime]

Still seeing this with webpack@5.0.0-beta.13 and webpack-dev-server It occurs when changing css and expecting a hot reload:

/home/u/dev/proj/frontend/.yarn/$$virtual/mini-css-extract-plugin-virtual-d418d84eb1/0/cache/mini-css-extract-plugin-npm-0.9.0-f8c8899095-2.zip/node_modules/mini-css-extract-plugin/dist/index.js:301
    if (typeof chunkGroup.getModuleIndex2 === 'function') {
                          ^

TypeError: Cannot read property 'getModuleIndex2' of undefined
    at MiniCssExtractPlugin.renderContentAsset (/home/u/dev/proj/frontend/.yarn/$$virtual/mini-css-extract-plugin-virtual-d418d84eb1/0/cache/mini-css-extract-plugin-npm-0.9.0-f8c8899095-2.zip/node_modules/mini-css-extract-plugin/dist/index.js:301:27)
    at Object.render (/home/u/dev/proj/frontend/.yarn/$$virtual/mini-css-extract-plugin-virtual-d418d84eb1/0/cache/mini-css-extract-plugin-npm-0.9.0-f8c8899095-2.zip/node_modules/mini-css-extract-plugin/dist/index.js:164:32)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/HotModuleReplacementPlugin.js:363:32
    at Hook.eval [as call] (eval at create (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    ```
    at Hook.CALL_DELEGATE [as _call] (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/Hook.js:14:14)
    at cont (/home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1643:40)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1704:8
    at /home/u/dev/proj/frontend/.yarn/cache/neo-async-npm-2.6.1-96bc443be6-2.zip/node_modules/neo-async/async.js:2830:7
    at Object.each (/home/u/dev/proj/frontend/.yarn/cache/neo-async-npm-2.6.1-96bc443be6-2.zip/node_modules/neo-async/async.js:2850:39)
    at Compilation.createChunkAssets (/home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:2377:12)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1700:12
    at Hook.eval [as callAsync] (eval at create (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/Hook.js:18:14)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1582:36
    at Hook.eval [as callAsync] (eval at create (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/Hook.js:18:14)

[sokra]

This should be fixed in webpack/webpack

The HotUpdateChunk should have ChunkGroups in groupsIterable just like normal Chunks

[fivethreeo]

Still seeing this with webpack@5.0.0-beta.13 and webpack-dev-server It occurs when changing css and expecting a hot reload:

/home/u/dev/proj/frontend/.yarn/$$virtual/mini-css-extract-plugin-virtual-d418d84eb1/0/cache/mini-css-extract-plugin-npm-0.9.0-f8c8899095-2.zip/node_modules/mini-css-extract-plugin/dist/index.js:301
    if (typeof chunkGroup.getModuleIndex2 === 'function') {
                          ^

TypeError: Cannot read property 'getModuleIndex2' of undefined
    at MiniCssExtractPlugin.renderContentAsset (/home/u/dev/proj/frontend/.yarn/$$virtual/mini-css-extract-plugin-virtual-d418d84eb1/0/cache/mini-css-extract-plugin-npm-0.9.0-f8c8899095-2.zip/node_modules/mini-css-extract-plugin/dist/index.js:301:27)
    at Object.render (/home/u/dev/proj/frontend/.yarn/$$virtual/mini-css-extract-plugin-virtual-d418d84eb1/0/cache/mini-css-extract-plugin-npm-0.9.0-f8c8899095-2.zip/node_modules/mini-css-extract-plugin/dist/index.js:164:32)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/HotModuleReplacementPlugin.js:363:32
    at Hook.eval [as call] (eval at create (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    ```
    at Hook.CALL_DELEGATE [as _call] (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/Hook.js:14:14)
    at cont (/home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1643:40)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1704:8
    at /home/u/dev/proj/frontend/.yarn/cache/neo-async-npm-2.6.1-96bc443be6-2.zip/node_modules/neo-async/async.js:2830:7
    at Object.each (/home/u/dev/proj/frontend/.yarn/cache/neo-async-npm-2.6.1-96bc443be6-2.zip/node_modules/neo-async/async.js:2850:39)
    at Compilation.createChunkAssets (/home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:2377:12)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1700:12
    at Hook.eval [as callAsync] (eval at create (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/Hook.js:18:14)
    at /home/u/dev/proj/frontend/.yarn/cache/webpack-npm-5.0.0-beta.13-3ca4e42afa-2.zip/node_modules/webpack/lib/Compilation.js:1582:36
    at Hook.eval [as callAsync] (eval at create (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/u/dev/proj/frontend/.yarn/cache/tapable-npm-2.0.0-beta.9-f864df88fb-2.zip/node_modules/tapable/lib/Hook.js:18:14)

Is this using my example? If not can you post your webpack config?

[fivethreeo]

I tried with webpack-dev-server too, no such error here.

https://github.com/fivethreeo/webpack-mini-css-extract-plugin-hmr-error/runs/490838699?check_suite_focus=true

Check out my example and see if it runs locally for you.

git clone https://github.com/fivethreeo/webpack-mini-css-extract-plugin-hmr-error.git
cd webpack-mini-css-extract-plugin-hmr-error
NODE_ENV=development yarn install
yarn run devserver

[infime]

@fivethreeo I pulled your example repo and I am able to reproduce by starting the dev server and then making a change to test.scss

Although it looks like the app is not necessary loading the css (browser console complains about the mimetype being text/html).