CODEWITHSUNDEEP
vue.jswebpackmini-css-extract-plugin
Mattimator
Mattimator

Reputation: 46

mini-css-extract-plugin conflict error in only some Vue projects

On two Vue projects I'm getting a conflicting order warning from mini-css-extract-plugin on build. Here's an example of one of the warnings:

Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/vue2-datepicker/index.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/global/simple-button.vue?vue&type=style&index=0&id=79cc5fd2&lang=scss&scoped=true&
   - couldn't fulfill desired order of chunk group(s) leads
   - while fulfilling desired order of chunk group(s) lead-panel

I understand this comes from conflicting import orders for components across the project (explained here https://github.com/vuejs/vue-cli/issues/3771#issuecomment-481072017 and mini-css-extract-plugin WARNING in chunk chunkName [mini-css-extract-plugin] Conflicting order between:).

I've mapped out the import tree and can see the conflicts. I also know I can disable the warning.

What I can't understand is why I'm only seeing this on two Vue projects but not on several others. I've tried replicating the error across other projects, but with no luck.

I've checked package versions and they seem to match. In particular, I've looked at the version for mini-css-extract-plugin itself. The projects use either 0.8.0 or 0.9.0, which either version AFAIK should display the warnings. The projects are all laid out very similarly.

Any ideas why I see this warning on some projects and not others?

Upvotes: 1

Views: 1707

Answers (1)

Antonija
Antonija

Reputation: 11

I have resolved this issue by lazily importing child components and ordering imports alphabetically. Not sure if order helped but lazy loading seemed to do the trick, especially where there was many component children that also had some conflicting styles. That might be the issue in your project. I also haven't experienced this in other Vue projects that are less messy than that one.

Upvotes: 1

Related Questions