[mini-css-extract-plugin] warning Conflicting order #3771

elainema · 2019-04-08T07:31:22Z

Version

3.0.5

Reproduction link

https://github.com/elainema/-mini-css-extract-plugin-Conflicting-order

Node and OS info

node: v10.15.3, yarn 1.9.4

Steps to reproduce

yarn install
yarn run build

What is expected?

正常打包

What is actually happening?

打包报warning: chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between: xxxxxx

查看并不影响结果，只是报wanring

另外vue最新cli已升级到3.5.5，当时安装时是3.0.5，本地升级后显示：success Installed "@vue/cli@3.5.5" with binaries，
查看版本依然是3.0.5，想卸载后重新也无法卸载，求助

sodatea · 2019-04-08T10:47:35Z

The warnings are from mini-css-extract-plugin, see more detail explanations here: New version 0.4.2 capture lot of warnings webpack-contrib/mini-css-extract-plugin#250 (comment) Generally it's due to some import ordering issues in your code base.

The Problem

In your case, there're three such warnings:

 warning

chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Offer/components/application-questions/application-questions.vue?vue&type=style&index=0&id=69b13b08&scoped=true&lang=css&
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MutipleEvents.vue?vue&type=style&index=0&id=fe6da6ea&scoped=true&lang=css&

 warning

chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Editable_Chosen_Offer_Onfocus.vue?vue&type=style&index=0&id=6c9a7e11&scoped=true&lang=css&
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MutipleEvents.vue?vue&type=style&index=0&id=fe6da6ea&scoped=true&lang=css&

 warning

chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OfferWhiteIPModal.vue?vue&type=style&index=0&lang=css&
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MutipleEvents.vue?vue&type=style&index=0&id=fe6da6ea&scoped=true&lang=css&

Basically they are all complaining that the file MutipleEvents.vue's ordering in the offer_detail chunk and offer_create chunk are conflicting.

The ordering is very clear in Create.vue:

application-questions.vue before MutipleEvents.vue
Editable_Chosen_Offer_Onfocus.vue before MutipleEvents.vue
OfferWhiteIPModal (imported by OfferConversionWhiteList) before MutipleEvents.vue

However, the situation is different in Detail.vue:

There're 2 imports of Payment.vue(L209 and L212), which transitively imports MultipleEvents.vue
Editable_Chosen_Offer_Onfocus.vue is transitively imported by Targeting.vue and it's between the 2 imports of Payment.vue
application-questions.vue imported by Basic.vue, also between them.
OfferConversionWhiteList, imported by Tracking.vue, is after Payment.vue, this is conflicting with the ordering in Create.vue.

The Solution

Delete the first occurrence of ./Detail/Payment.vue
Correct the name of the second import of ./Detail/Payment.vue (submodule_pyament -> submodule_payment)
Move this line up above ./Detail/Payment.vue

Maybe it's due to you've used different package managers to install Vue CLI. Run ls -l $(which vue) in the terminal to see which folder the binary actually links to.

Next time please consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

elainema · 2019-04-09T02:00:33Z

The warnings are from mini-css-extract-plugin, see more detail explanations here: webpack-contrib/mini-css-extract-plugin#250 (comment) Generally it's due to some import ordering issues in your code base.

The Problem

In your case, there're three such warnings:
 warning

chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Offer/components/application-questions/application-questions.vue?vue&type=style&index=0&id=69b13b08&scoped=true&lang=css&
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MutipleEvents.vue?vue&type=style&index=0&id=fe6da6ea&scoped=true&lang=css&

 warning

chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Editable_Chosen_Offer_Onfocus.vue?vue&type=style&index=0&id=6c9a7e11&scoped=true&lang=css&
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MutipleEvents.vue?vue&type=style&index=0&id=fe6da6ea&scoped=true&lang=css&

 warning

chunk offer_create~offer_detail [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OfferWhiteIPModal.vue?vue&type=style&index=0&lang=css&
 * css ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??postcss!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MutipleEvents.vue?vue&type=style&index=0&id=fe6da6ea&scoped=true&lang=css&
Basically they are all complaining that the file MutipleEvents.vue's ordering in the offer_detail chunk and offer_create chunk are conflicting.

The ordering is very clear in Create.vue:

application-questions.vue before MutipleEvents.vue

Editable_Chosen_Offer_Onfocus.vue before MutipleEvents.vue

OfferWhiteIPModal (imported by OfferConversionWhiteList) before MutipleEvents.vue

However, the situation is different in Detail.vue:

There're 2 imports of Payment.vue(L209 and L212), which transitively imports MultipleEvents.vue

Editable_Chosen_Offer_Onfocus.vue is transitively imported by Targeting.vue and it's between the 2 imports of Payment.vue

application-questions.vue imported by Basic.vue, also between them.

OfferConversionWhiteList, imported by Tracking.vue, is after Payment.vue, this is conflicting with the ordering in Create.vue.

The Solution

Delete the first occurrence of ./Detail/Payment.vue

Correct the name of the second import of ./Detail/Payment.vue (submodule_pyament -> submodule_payment)

Move this line up above ./Detail/Payment.vue

Maybe it's due to you've used different package managers to install Vue CLI. Run ls -l $(which vue) in the terminal to see which folder the binary actually links to.

Next time please consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug slightly_smiling_face

Thanks very much, your method solved my question, and i will try using the forum, the Discord server or StackOverflow for questions first.

qnp · 2019-08-29T15:06:08Z

Regarding
webpack-contrib/mini-css-extract-plugin#250
https://forum.vuejs.org/t/sppress-warnings-in-vue-cli-3/45905/5

If you wonder how to remove only these warnings in vue-cli-3, I have done the following in vue.config.js:

  chainWebpack: config => {
    config.plugin('friendly-errors').tap(args => {
      // the actual transformer defined by vue-cli-3
      const vueCli3Transformer = args[0].additionalTransformers[0];
      args[0].additionalTransformers = [
        // use the actual transformer
        vueCli3Transformer,
        // add an other transformer that 'empty' the desired error
        error => {
          const regexp = /\[mini-css-extract-plugin\]\nConflicting order between:/;
          if (regexp.test(error.message)) return {};
          return error;
        },
      ];
      return args;
    });
  }

Zacaria · 2019-12-23T11:06:36Z

An answer that worked perfectly for me found here :
vuetifyjs/vuetify#5271 (comment)

If you are using Vue CLI v3, add the code below to vue.config.js can ignore this error.

// vue.config.js
module.exports = {
    css: {
        extract: { ignoreOrder: true },
    },
}

Make sure that you have install the latest mini-css-extract-plugin, which is a dependency of @vue/cli-service.

Check links below for more information:

webpack-contrib/mini-css-extract-plugin#250
webpack-contrib/mini-css-extract-plugin#422
https://cli.vuejs.org/config/#css-extract

the-owl · 2020-03-02T11:37:52Z

Simply setting css.extract.ignoreOrder leads to CSS extraction in dev mode and for me it breaks CSS hot reloading. Replace with this:

css: {
  extract: process.env.NODE_ENV === 'production' ? {
     ignoreOrder: true,
  } : false,
}

PLQin · 2020-07-20T03:05:10Z

关于 [mini-css-extract-plugin] Conflicting order. Following module has been added: 异常的参考资料：

解决方案(2个) ：

设置 ignoreOrder

// vue.config.js
plugins: [
  new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
  }),
],

处理css顺序问题

WARNING in chunk styles [mini-css-extract-plugin]
Following module has been added:
* css xxx/css-loader/dist/cjs.js!./e1.css
* css xxx/css-loader/dist/cjs.js!./a1.vue
while this module as dependencies that haven't been added before:
* css xxx/css-loader/dist/cjs.js!./e2.css (used previous to added module in chunk entry2)
* css xxx/css-loader/dist/cjs.js!./a2.vue (used previous to added module in chunk entry2)

将 e2.css 放置在 e1.css之前, a2.vue 放置在 a1.vue, 即可。

rustyx · 2021-03-02T12:25:26Z

Another solution - configure MiniCssExtractPlugin only when it's enabled:

// vue.config.js
module.exports = {
  configureWebpack: config => {
    const miniCssExtractPlugin = config.plugins.find(
      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    );
    if (miniCssExtractPlugin) {
      miniCssExtractPlugin.options.ignoreOrder = true;
    }
  }
}

While building the dApp, the webpack plugin mini-css-extract-plugin is warning us that the CSS order is not correct. Maintaining a clean order of the styling sections is basically not possible in Vue. Therefore it makes sense to disable this rule. vuejs/vue-cli#3771

The build shows a warning about the CSS import order. However, the warning shouldn't be relevant to us, because the CSS in each component applies only to the component: global styles all live in app.scss. Silencing the warning by changing vue.config.js according to vuejs/vue-cli#3771 (comment) The warning was: chunk component-form-draft-testing~component-form-submissions~component-submission-show [mini-css-extract-plugin] Conflicting order. Following module has been added: * 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/modal.vue?vue&type=style&index=0&lang=scss& 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/markdown/textarea.vue?vue&type=style&index=0&lang=scss& - couldn't fulfill desired order of chunk group(s) component-submission-show - while fulfilling desired order of chunk group(s) component-form-draft-testing, component-form-submissions

tmcdos · 2021-12-04T14:35:39Z

To prevent breaking HMR in development mode when using the extract option, we can patch mini-css-extract-plugin

Index: \mini-css-extract-plugin\dist\hmr\hotModuleReplacement.js
===================================================================
--- \mini-css-extract-plugin\dist\hmr\hotModuleReplacement.js
+++ \mini-css-extract-plugin\dist\hmr\hotModuleReplacement.js
@@ -57,13 +57,13 @@
     var splitResult = src.split(/([^\\/]+)\.js$/);
     var filename = splitResult && splitResult[1];
 
     if (!filename) {
-      return [src.replace('.js', '.css')];
+      return [src.replace('.js', '.css').replace('/js/', '/css/')]; // TMCDOS
     }
 
     if (!fileMap) {
-      return [src.replace('.js', '.css')];
+      return [src.replace('.js', '.css').replace('/js/', '/css/')]; // TMCDOS
     }
 
     return fileMap.split(',').map(function (mapRule) {
       var reg = new RegExp("".concat(filename, "\\.js$"), 'g');
@@ -126,9 +126,9 @@
     stripWWW: false
   }); // eslint-disable-next-line array-callback-return
 
   src.some(function (url) {
-    if (href.indexOf(src) > -1) {
+    if (href.indexOf(url) > -1) { // TMCDOS
       ret = url;
     }
   });
   return ret;

davidyuk · 2023-05-06T14:08:27Z

One more way to ignore order using chainWebpack

// add to vue.config.js
module.exports = {
  chainWebpack(config) {
    if (config.plugins.has('extract-css')) {
      config.plugin('extract-css').tap(([definitions]) => [{
        ...definitions,
        ignoreOrder: true,
      }]);
    }
  },
};

LinusBorg added the scope: cli-service build label Apr 8, 2019

sodatea closed this as completed Apr 8, 2019

tangjinzhou mentioned this issue May 18, 2020

throw a warning when build the project vueComponent/ant-design-vue#2241

Closed

1 task

wtto00 mentioned this issue Jan 23, 2021

vue遇到Conflicting order. Following module has been added:（加载顺序冲突） wtto00/wtto00.github.io#6

Closed

weilbith mentioned this issue Jul 8, 2021

dApp - build process reports infinite amount of warning output raiden-network/light-client#2854

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[mini-css-extract-plugin] warning Conflicting order #3771

[mini-css-extract-plugin] warning Conflicting order #3771

elainema commented Apr 8, 2019 •

edited

sodatea commented Apr 8, 2019

elainema commented Apr 9, 2019

The Problem

The Solution

qnp commented Aug 29, 2019 •

edited

Zacaria commented Dec 23, 2019 •

edited

the-owl commented Mar 2, 2020

PLQin commented Jul 20, 2020

rustyx commented Mar 2, 2021

tmcdos commented Dec 4, 2021

davidyuk commented May 6, 2023

[mini-css-extract-plugin] warning Conflicting order #3771

[mini-css-extract-plugin] warning Conflicting order #3771

Comments

elainema commented Apr 8, 2019 • edited

Version

Reproduction link

Node and OS info

Steps to reproduce

What is expected?

What is actually happening?

sodatea commented Apr 8, 2019

The Problem

The Solution

elainema commented Apr 9, 2019

The Problem

The Solution

qnp commented Aug 29, 2019 • edited

Zacaria commented Dec 23, 2019 • edited

the-owl commented Mar 2, 2020

PLQin commented Jul 20, 2020

rustyx commented Mar 2, 2021

tmcdos commented Dec 4, 2021

davidyuk commented May 6, 2023

elainema commented Apr 8, 2019 •

edited

qnp commented Aug 29, 2019 •

edited

Zacaria commented Dec 23, 2019 •

edited