WARNING in chunk chunk-common [mini-css-extract-plugin] Conflicting order.

[jeffatpf]

When building our Quasar app I’m getting several messages similar to:

WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-stylus-variables.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/shared/CUModal.vue?vue&type=style&index=0&id=18b6807e&scoped=true&lang=stylus&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-stylus-variables.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/shared/DivotCard.vue?vue&type=style&index=0&id=35d3148d&scoped=true&lang=stylus&
   - couldn't fulfill desired order of chunk group(s) , , , , ,

Any insight would be appreciated.

[yosa]

in the same situation

[FascistDonut]

I’m having the same problem.

I have 2 repositories and I’m trying to move all the code from one to the other… in the first one it works fine. In the new one that has all the same exact files, it won’t build successfully.

WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/findSKU.vue?vue&type=style&index=0&lang=css&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deliveryLabelFull.vue?vue&type=style&index=0&lang=css&
   - couldn't fulfill desired order of chunk group(s) , 

WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/deliveryLabelFull.vue?vue&type=style&index=0&lang=css&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/lineItem.vue?vue&type=style&index=0&lang=css&
   - couldn't fulfill desired order of chunk group(s) , 
   - while fulfilling desired order of chunk group(s) ,

[FascistDonut]

[SOLVED]

I was able to resolve this by placing the following code in my quasar.conf.js file, inside extendWebpack:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
        module.exports = {
          plugins: [
            new MiniCssExtractPlugin({
              ignoreOrder: true
            })
          ],
          module: {
            rules: [
              {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
              }
            ]
          }
        };

Here is my full build config that I use with netlify for clarification:

build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      // showProgress: false,
      // gzip: true,
      // analyze: true,
      // preloadChunks: false,
      // extractCSS: false,

      // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
      // copy _redirects file for netlify
      extendWebpack(cfg) {
        const CopyWebpackPlugin = require('copy-webpack-plugin')
        cfg.plugins.push(
          new CopyWebpackPlugin([{
            from: 'src/_redirects',
            to: ''
          }])
        )
        const MiniCssExtractPlugin = require("mini-css-extract-plugin");
        module.exports = {
          plugins: [
            new MiniCssExtractPlugin({
              ignoreOrder: true
            })
          ],
          module: {
            rules: [
              {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
              }
            ]
          }
        };
      }
    },

[jeffatpf]

I’ve tried your approach @FascistDonut and I’m getting many errors on a dev build of the like:

@ ./node_modules/@quasar/extras/animate/pulse.css 4:14-223 14:3-18:5 15:22-231
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./node_modules/@quasar/extras/animate/slideInLeft.css

Syntax Error: SyntaxError

(1:1) Unknown word

1 | // extracted by mini-css-extract-plugin
| ^

[Kirschkern]

I’ve had the same problem.
I’ve changed the order of the imports and now it works.

Some Details
This was the error message:

chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-2-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-scss-variables.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TimerProgress.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-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-2-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-scss-variables.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Booth.vue?vue&type=style&index=0&lang=scss&
   - couldn't fulfill desired order of chunk group(s)

You see: “Booth.vue” at the end of the message. So I searched for files where I import Booth.vue. I’ve opened the file and changed

<script>
import userflap from '../components/Userflap.vue';
import connectoor from "../components/Connectoor.vue";
import Booth from '../components/Booth.vue';
...

to

<script>
import Booth from '../components/Booth.vue';
import userflap from '../components/Userflap.vue';
import connectoor from "../components/Connectoor.vue";
...

So the only difference is the import order (“import Booth” is now at first place).
And now it worked again without setting “ignoreOrder”.