Closed
Description
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 withstyle-loader
andbootstrap
git checkout css-extract
to see the project still working now with thebootstrap
css extractedgit checkout dynamic-imports
to see a project where I addedreact-mapbox-gl
with thestyle-loader
working (somini-css-extract-plugin
is not applied in this branch) and the library is being split intovendors~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 commentedon Jan 22, 2019
@a-aslan it is strange, maybe problem in
babel
, anyway feel free to investigate and send a PRbundleCSS
is broken micromata/Baumeister#272tmeme commentedon Apr 9, 2019
#220
khades commentedon Mar 4, 2020
I did some research.
THIS IS EDITED, my previous observation was wrong.
In case of dynamic imports while calling that function
mini-css-extract-plugin/src/index.js
Line 411 in 1ffc393
we are getting more modules than chunk needs to render.
Loader compares size usedModules with size of modules.
mini-css-extract-plugin/src/index.js
Line 460 in 1ffc393
BUT when walking through all modulesByChunkGroups
mini-css-extract-plugin/src/index.js
Line 466 in 1ffc393
it find that all list elements are used (listed in userModules set)
mini-css-extract-plugin/src/index.js
Line 468 in 1ffc393
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
mini-css-extract-plugin/src/index.js
Line 498 in 1ffc393
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.
bestMatch
under some situations faceyspacey/extract-css-chunks-webpack-plugin#222tusharshuklaa commentedon Mar 21, 2020
Is there any workaround for this, I'm also facing this issue.
fivethreeo commentedon Mar 21, 2020
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 commentedon Mar 22, 2020
Feel free to contact me for support 😀
khades commentedon Mar 23, 2020
only by modifying mini-css-extract-plugin itself. Before line
mini-css-extract-plugin/src/index.js
Line 498 in 1ffc393
add code
I think that's the right way, cause bestMatch is not filled when all chunks have all modules resolved.
7 remaining items