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

[elainema]

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，想卸载后重新也无法卸载，求助

[haoqunjiang]

1. 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:

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

However, the situation is different in Detail.vue:

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

The Solution

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

---

2. 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]

1. 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:

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

However, the situation is different in Detail.vue:

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

The Solution

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

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

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

4. 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]

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]

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]

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]

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

• https://laysent.com/til/2019-11-28_conflicting-order-in-mini-css-extract-plugin
• fix: only output when any chunk is fulfilled webpack-contrib/mini-css-extract-plugin#468
• feat: improve warning of conflict order webpack-contrib/mini-css-extract-plugin#465

解决方案(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]

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;
    }
  }
}