Mini-css-extract-plugin: 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: https://github.com/webpack/webpack/pull/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. :smile:

[fivethreeo]

Error seems to be gone in [email protected] 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 [e-mail] 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
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/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 [email protected] 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 [email protected] 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).

[fivethreeo]

Ok, reinstalled node modules and can confirm now.

[fivethreeo]

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L414

In this line the destructuring does not yield a ChunkGroup even though the set is not empty.

This chunkGroup is only needed to fall back if we are below webpack 4.

if in

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L416

We change to

if (typeof chunkGroup === 'undefined' || typeof chunkGroup.getModuleIndex2 === 'function')

We get more interesting errors :)

[fivethreeo]

Looking at razzle, I see they just use mini-css-extract-plugin when building production css. Just style-loader is used in development with hmr.

[allocenx]

So, is there any fix for this yet? I can't get this to work at all, on beta 13 of the webpack 5. Is there a workaround until a fix is out??

[fivethreeo]

No fix yet, but just don't use this with hmr in dev. Just use the style loader instead when developing and just use this plugin when building the production build.

[lhz516]

Exact same issue here. Let share some debug experience. Hopefully it can give the author some insights to fix.

WhenI changed something and saving the stylesheet. It triggered renderContentAsset twice. The first time is normal - chunk.groupsIterable is a Set with one element; but the second time chunk.groupsIterable is an empty Set which causes the uncaught error

[kamilic]

still same issues in [email protected]

[slightlyfaulty]

Still same issue in [email protected].

This is a show-stopper bug completely preventing HMR with MiniCssExtractPlugin in Webpack 5. Please give this some attention 🙏

[vankop]

@evilebottnawi I will take a look on this, any blockers?

[alexander-akait]

@vankop go ahead, no blockers

[osvaldovega]

• Operating System: MacOS Catalina
• Node Version: v13.140
• NPM Version: v6.14.15
• webpack Version: v5.0.0-beta.22
• mini-css-extract-plugin Version: v0.9.0

I have the same problem with Webpack 5-beta.22, probably you guys already know this but look like the problem, is related the HMR for (CSS|SCSS) files using the mini-css-extract-plugin, if I use the following configuration for CSS files

{
  test: /\.css$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader'],
}

I get the following error.

✖ ｢wdm｣: caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read property 'getModuleIndex2' of undefined
    at MiniCssExtractPlugin.renderContentAsset (/Users/ovega/Desktop/javascript/node_modules/mini-css-extract-plugin/dist/index.js:301:27)
    at Object.render (/Users/ovega/Desktop/javascript/node_modules/mini-css-extract-plugin/dist/index.js:164:32)
    at /Users/ovega/Desktop/javascript/node_modules/webpack/lib/HotModuleReplacementPlugin.js:464:32
    at Hook.eval [as callAsync] (eval at create (/Users/ovega/Desktop/javascript/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/ovega/Desktop/javascript/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at cont (/Users/ovega/Desktop/javascript/node_modules/webpack/lib/Compilation.js:1917:32)
    at /Users/ovega/Desktop/javascript/node_modules/webpack/lib/Compilation.js:1960:8
    at /Users/ovega/Desktop/javascript/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/ovega/Desktop/javascript/node_modules/neo-async/async.js:2850:39)
    at Compilation.createChunkAssets (/Users/ovega/Desktop/javascript/node_modules/webpack/lib/Compilation.js:2681:12)

But if I replace in the Webpack configuration the mini-css-extract-plugin for style-loader everything works fine again.

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
}

Now when I run the application for the first time everything loads properly, no errors, and the styles file loads ok, but as soon I make the minimum change in the CSS files after reloads is when I get the error message.

I don't know exactly what changes in Webpack 5 and the mini-css-extract-plugin, but looks like using this plugin causes the problem.

NOTE:
As I saw in this thread I tried disabling the new webpack.HotModuleReplacementPlugin() as someone mentioned this could fixed the problem, however in my case removing this plugin didn't affect at all the result, I still got the error.

[lexmes]

I have to ask. Is there any way to fix it in the mini-css-extract plugin or do we have to wait for webpack?

[alexander-akait]

fix will be in near future

[alexander-akait]

@vankop Can you test https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v0.11.0?

[slightlyfaulty]

I tried out the update, but seeing a different error now. Hope it helps.

TypeError: Cannot read property 'getModulePostOrderIndex' of undefined
    at MiniCssExtractPlugin.renderContentAsset (/node_modules/mini-css-extract-plugin/dist/index.js:384:26)
    at Object.render (/node_modules/mini-css-extract-plugin/dist/index.js:225:34)
    at /node_modules/webpack/lib/HotModuleReplacementPlugin.js:488:32
    at Hook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/node_modules/tapable/lib/Hook.js:18:14)
    at cont (/node_modules/webpack/lib/Compilation.js:1975:33)
    at /node_modules/webpack/lib/Compilation.js:2013:9
    at /node_modules/neo-async/async.js:2830:7
    at Object.each (/node_modules/neo-async/async.js:2850:39)
    at Compilation.createChunkAssets (/node_modules/webpack/lib/Compilation.js:2969:12)

Using the latest [email protected]

[alexander-akait]

@slightlyfaulty Big thanks for testing, WIP on compatibility more

[alexander-akait]

@slightlyfaulty it is weird what we have HMR tests and nothing is broken, maybe you can provide simple reproducible test repo?

[Levdbas]

@slightlyfaulty , are you using weback-dev-middleware as well? Might have something to do with that. I've ran into the same issue after updating my initial test repository: https://github.com/Levdbas/webpack-mini-css-extract-plugin-hmr-error from https://github.com/webpack-contrib/mini-css-extract-plugin/issues/487#issuecomment-569782241_ . @evilebottnawi minimal test repo is updated.

[alexander-akait]

@Levdbas thanks, I will look at this in near future

[slightlyfaulty]

_EDIT:_ Sorry @Levdbas I was thinking of webpack-dev-server 😅. I'm not using webpack-dev-middleware.

@evilebottnawi I'll try to set up a minimal repro for the error I'm seeing.

[slightlyfaulty]

@evilebottnawi slightlyfaulty/webpack-mcep-repro-487

1) yarn start
2) Change src/index.css

[DalimTeam]

Nothing changes? Still not working.
✖ ｢wdm｣: caused by plugins in Compilation.hooks.processAssets TypeError: Cannot read property 'getModulePostOrderIndex' of undefined at MiniCssExtractPlugin.renderContentAsset

[fivethreeo]

This issue changed from a missing getModuleIndex2 on undefined to a missing getModulePostOrderIndex on undefined, so nothing changed. So the error occurs before.

[alexander-akait]

Please try https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v0.11.3, if you faced with issue(s)/problems, please open new issue with simple reproducible test repo, thanks for using webpack