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
| ^