No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

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

    Help
    4
    6
    6187
    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
              • Kirschkern
                Kirschkern last edited by

                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”.

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