Nuxt Compiled with warnings - extract-css-chunks-webpack-plugin

Question

I'm working on a big project that contains multiple files and folders. Now, when I run npm run dev or change pages Nuxt is showing this these annoying warnings.

 WARN  Compiled with 7 warnings                       friendly-errors 11:11:49


 WARN  Error                                          friendly-errors 11:11:49

chunk pages/add-new-property/index.pages/property/index.pages/room-management/add-new/index.pages/signup/index [extract-css-chunks-webpack-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./components/property/policies/yes-no-box.vue?vue&type=style&index=0&id=67558805&lang=scss&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vuetify-loader/lib/loader.js??ref--16-0!./node_modules/vue-loader/lib??vue-loader-options!./components/UI/checkbox/checkbox.vue?vue&type=style&index=0&lang=scss&
   - couldn't fulfill desired order of chunk group(s) pages/property/index, pages/room-management/add-new/index
   - while fulfilling desired order of chunk group(s) pages/add-new-property/index, pages/signup/index
. . .

That's just one of the 7 warnings.

Can anyone tell me how to fix or ,at least, ignore those warnings in Nuxtjs? Note that the warnings are from extract-css-chunks-webpack-plugin not from mini-css-extract-plugin.

Edit: This issue only occurs in the development and it's very annoying because when you first load a page the styles aren't loaded. So, you have to manually refresh the page. But after refreshing it, everything's fine if you revisit to that page again.

Answer 1

pages/property/index, pages/room-management/add-new/index and pages/add-new-property/index, pages/signup/index

they both import some components, but the order of the import are different. So you have to check the import order in these files.

For example, file a.vue and b.vue have different import order:

a.vue:

import CompA from 'xxx'
import CompB from 'yyy'

b.vue

import CompB from 'yyy'
import CompA from 'xxx'

This will cause the error.

Answer 2

you can add the ignoreOrder property in nuxt.config.js

build: {
    extractCSS: {
      ignoreOrder: true
    }
}