mini-css-extract-plugin: Webpack 5.beta.11: HMR error Cannot read property 'getModuleIndex2' of undefined

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

Run webpack in watchmode with HMR
compile css, no issue
rerun, no issue 😃

Actual Behavior

Run webpack in watchmode with HMR
compile css, no issue
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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 39 (10 by maintainers)

Most upvoted comments

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 webpack@5.0.0-beta.28

slightlyfaulty on Aug 27, 2020

Still same issue in webpack@5.0.0-beta.18.

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

slightlyfaulty on Jun 22, 2020

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.

osvaldovega on Aug 2, 2020

still same issues in webpack@5.0.0-beta.15

kamilic on May 18, 2020

@evilebottnawi slightlyfaulty/webpack-mcep-repro-487

yarn start
Change src/index.css

slightlyfaulty on Aug 28, 2020

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

alexander-akait on Oct 2, 2020