Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Levdbas opened this issue Dec 29, 2019 · 39 comments

Comments

@Levdbas
Copy link

Levdbas commented Dec 29, 2019

  • 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
Copy link
Member

alexander-akait commented Dec 30, 2019

Yes, please create reproducible test repo?

@Levdbas
Copy link
Author

Levdbas commented Dec 30, 2019

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
Copy link

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

@fivethreeo
Copy link

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
Copy link

infime commented Mar 2, 2020

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

@fivethreeo
Copy link

Error seems to be gone in [email protected] but there are new errors about ordering

@fivethreeo
Copy link

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

@infime
Copy link

infime commented Mar 2, 2020 via email

@fivethreeo
Copy link

Me too, quite sure I saw it

@fivethreeo
Copy link

fivethreeo commented Mar 2, 2020

@infime
Copy link

infime commented Mar 3, 2020

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
Copy link
Member

sokra commented Mar 4, 2020

This should be fixed in webpack/webpack

The HotUpdateChunk should have ChunkGroups in groupsIterable just like normal Chunks

@fivethreeo
Copy link

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
Copy link

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
Copy link

infime commented Mar 17, 2020

@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
Copy link

Ok, reinstalled node modules and can confirm now.

@fivethreeo
Copy link

fivethreeo commented Mar 17, 2020

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
Copy link

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.

@hamzamihaidanielx
Copy link

hamzamihaidanielx commented Apr 12, 2020

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
Copy link

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
Copy link

lhz516 commented May 16, 2020

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

image

@kamilic
Copy link

kamilic commented May 18, 2020

still same issues in [email protected]

@slightlyfaulty
Copy link

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
Copy link
Contributor

vankop commented Jun 30, 2020

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

@alexander-akait
Copy link
Member

alexander-akait commented Jun 30, 2020

@vankop go ahead, no blockers

@osvaldovega
Copy link

osvaldovega commented Aug 2, 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.

@lexmes
Copy link

lexmes commented Aug 12, 2020

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
Copy link
Member

fix will be in near future

@slightlyfaulty
Copy link

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
Copy link
Member

@slightlyfaulty Big thanks for testing, WIP on compatibility more

@alexander-akait
Copy link
Member

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

@Levdbas
Copy link
Author

Levdbas commented Aug 28, 2020

@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 #487 (comment)_ . @evilebottnawi minimal test repo is updated.

@alexander-akait
Copy link
Member

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

@slightlyfaulty
Copy link

slightlyfaulty commented Aug 28, 2020

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
Copy link

@evilebottnawi slightlyfaulty/webpack-mcep-repro-487

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

@DalimTeam
Copy link

DalimTeam commented Sep 17, 2020

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

@fivethreeo
Copy link

fivethreeo commented Sep 17, 2020

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests