Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    5
    1092
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jeffatpf last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • Y
        yosa last edited by

        in the same situation

        1 Reply Last reply Reply Quote 0
        • F
          FascistDonut last edited by 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) ,
          
          F 1 Reply Last reply Reply Quote 0
          • F
            FascistDonut @FascistDonut last edited by

            [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"]
                          }
                        ]
                      }
                    };
                  }
                },
            
            1 Reply Last reply Reply Quote 0
            • J
              jeffatpf last edited by

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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post