Vue-cli: [mini-css-extract-plugin] warning Conflicting order

Created on 8 Apr 2019  ·  6Comments  ·  Source: vuejs/vue-cli

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/[email protected]" with binaries，
查看版本依然是3.0.5，想卸载后重新也无法卸载，求助

cli-service build
Source
picture elainema

Most helpful comment

An answer that worked perfectly for me found here :
https://github.com/vuetifyjs/vuetify/issues/5271#issuecomment-542624461

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

picture Zacaria on 23 Dec 2019
👍6 ❤2

All 6 comments

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

The Problem

In your case, there're three such warnings:

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

sodatea picture sodatea on 8 Apr 2019
❤5
  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:

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.

elainema picture elainema on 9 Apr 2019

Regarding
https://github.com/webpack-contrib/mini-css-extract-plugin/issues/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;
    });
  }
qnp picture qnp on 29 Aug 2019
👍3

An answer that worked perfectly for me found here :
https://github.com/vuetifyjs/vuetify/issues/5271#issuecomment-542624461

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

Zacaria picture Zacaria on 23 Dec 2019
👍6 ❤2

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,
}
the-owl picture the-owl on 2 Mar 2020
👍6 ❤1

关于 [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, 即可。

PLQin picture PLQin on 20 Jul 2020
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

GeertClaes picture GeertClaes  ·  31Comments
yangzhuq picture yangzhuq  ·  33Comments
light24bulbs picture light24bulbs  ·  41Comments
deanilvincent picture deanilvincent  ·  38Comments
williamstar picture williamstar  ·  79Comments