Skip to content

Cannot read property 'pop' of undefined #341

Closed
@a-aslan

Description

@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?

Activity

alexander-akait

alexander-akait commented on Jan 22, 2019

@alexander-akait
Member

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

tmeme

tmeme commented on Apr 9, 2019

@tmeme
khades

khades commented on Mar 4, 2020

@khades

I did some research.

THIS IS EDITED, my previous observation was wrong.

In case of dynamic imports while calling that function

renderContentAsset(compilation, chunk, modules, requestShortener) {

we are getting more modules than chunk needs to render.

Loader compares size usedModules with size of modules.

while (usedModules.size < modules.length) {

BUT when walking through all modulesByChunkGroups

for (const list of modulesByChunkGroup) {

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

while (list.length > 0 && usedModules.has(list[list.length - 1])) {

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

const fallbackModule = bestMatch.pop();

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

tusharshuklaa commented on Mar 21, 2020

@tusharshuklaa

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

fivethreeo

fivethreeo commented on Mar 21, 2020

@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

fivethreeo commented on Mar 22, 2020

@fivethreeo

Feel free to contact me for support 😀

khades

khades commented on Mar 23, 2020

@khades

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

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

const fallbackModule = bestMatch.pop();

add code

if (!bestMatch) {
    break;
}

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

7 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @fivethreeo@khades@alexander-akait@tmeme@tusharshuklaa

        Issue actions

          Cannot read property 'pop' of undefined · Issue #341 · webpack-contrib/mini-css-extract-plugin