Mini-css-extract-plugin: Cannot read property 'pop' of undefined

[a-aslan]

I'm running Node v8.11.4 on Windows 10 version 1803.

I have a minimal project showcasing the issue on: https://github.com/a-aslan/webpack-dynamic-imports

The issue is that when I'm using mini-css-extract-plugin with dynamic imports, I'm getting the following error on a webpack build:

ERROR in chunk app
app.app.css
Cannot read property 'pop' of undefined

I've also recorded the issue on: https://youtu.be/b0Q312y2LSU

How to reproduce the issue:

• clone the minimal project git repository on: https://github.com/a-aslan/webpack-dynamic-imports
• git checkout master to see a simple hello world project with style-loader and bootstrap
• git checkout css-extract to see the project still working now with the bootstrap css extracted
• git checkout dynamic-imports to see a project where I added react-mapbox-gl with the style-loader working (so mini-css-extract-plugin is not applied in this branch) and the library is being split into vendors~mapbox.js
• git checkout merge-dynamic-imports-with-css-extract to see the previous two branches merged on how to reproduce the issue

As you can see both extracting css and dynamic imports works when they are excluded from eachother. But when I want to extract css in combination with code splitting (by using dynamic imports), I'm getting the issue.

Am I doing something wrong?

[alexander-akait]

@a-aslan it is strange, maybe problem in babel, anyway feel free to investigate and send a PR

[tmeme]

220

[khades]

I did some research.

THIS IS EDITED, my previous observation was wrong.

In case of dynamic imports while calling that function https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffc393a2e377fe0cc341cfcbc5396e07a8e4077/src/index.js#L411
we are getting more modules than chunk needs to render.

Loader compares size usedModules with size of modules.
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffc393a2e377fe0cc341cfcbc5396e07a8e4077/src/index.js#L460

BUT when walking through all modulesByChunkGroups

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffc393a2e377fe0cc341cfcbc5396e07a8e4077/src/index.js#L466

it find that all list elements are used (listed in userModules set)

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffc393a2e377fe0cc341cfcbc5396e07a8e4077/src/index.js#L468

In case when ALL modules in modulesByChunkGroup are in usedModules, even if not all modules are used, it neither sets value for variable "bestMatch", nor setting "success" to true. In that case it can not .pop() from undefined value

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffc393a2e377fe0cc341cfcbc5396e07a8e4077/src/index.js#L498

My proposal is to check existence of value in "bestMatch", if there not any - just break the cycle before trying to pop the bestMatch, since all modules, that needs rendering got their dependencies resolved.

[tusharshuklaa]

Is there any workaround for this, I'm also facing this issue.

[fivethreeo]

Just dont use this with HMR, just use in a production build. So skip this loader and plugin in dev and use style-loader in dev.

[fivethreeo]

Feel free to contact me for support 😀

[khades]

Is there any workaround for this, I'm also facing this issue.

only by modifying mini-css-extract-plugin itself. Before line

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/1ffc393a2e377fe0cc341cfcbc5396e07a8e4077/src/index.js#L498

add code

if (!bestMatch) {
    break;
}

I think that's the right way, cause bestMatch is not filled when all chunks have all modules resolved.

[kavience]

@khades Thx, dude, you are greate

[ghost]

any news about this? how to fix this issue?

[alexander-akait]

Found a problem

[alexander-akait]

Original:

optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'app',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },

Need to changed to:

optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          // Just get any other name differing from entrypoints names
          name: 'app-other',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },

Why? Because app.js from splitChunks conflicts with app.js endpoint

entry: {
  app: './src/index.js',
},

Anyway you will have empty chunk due https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85 and https://github.com/webpack/webpack/issues/11088, we will fix it on webpack@5 side, maybe backport on plugin side in near future

I think we can also improve error reporting here with some advice if we can't solve it.

[alexander-akait]

Let's close in favor https://github.com/webpack-contrib/mini-css-extract-plugin/issues/257, anyway if somebody still have the problem and solution from https://github.com/webpack-contrib/mini-css-extract-plugin/issues/341#issuecomment-675603278 not help you please open a new issue with reproducible test repo, I am very sorry for the long delay in the reply and please forgive us. Also I will try to improve error reporting in near future, it is in my TODO