New version 0.4.2 capture lot of warnings

[nuintun]

Lot of conflicting order warning, but this css files not care about their order!

[libbGit]

@libbGit Look my comment.

Thank you very much, i have cleaned out the warning log

[sealzrt]

experiencing the same issue

[sealzrt]

@valscion thanks, I fixed it with webpack-filter-warnings-plugin

[patientplatypus]

Yeah this is silly - I don't want to be forced to rely on a certain order of imports in my javascript files. The component based architecture of most javascript frameworks (React et al.) is philosophically built around atomization and independence of class components and this breaks this.

[luckyyyyy]

I fixed it with webpack-filter-warnings-plugin

new FilterWarningsPlugin({
    exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
}),

[alexdonets]

This works but only for the browser console, is there a way to filter warnings in the terminal? (I'm using Visual Code)

new FilterWarningsPlugin({
    exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
})

[GasimGasimzada]

Instead of ignoring these warnings, could someone explain to me how to debug this and try to fix the orders? I have a problem only between two files and in all the files where these two files are imported, the order is exactly the same. What is the reason for this?

[dev-bjoern]

@GasimGasimzada

and in all the files where these two files are imported, the order is exactly the same (https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-464515824)

and are "all the files where these two files are imported" themselves imported to somewhere or are they "top level"? if not, then the problem mentioned in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-416708880 might be the reason for the warnings.

I think MiniCssExtractPlugin needs to provide a compare function like mentioned here https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-438061698 so we can decide on the conflicting order ourselves because with some imports its logicly impossible to ensure correct order.

[luckyyyyy]

@GasimGasimzada

and in all the files where these two files are imported, the order is exactly the same (#250 (comment))

and are "all the files where these two files are imported" themselves imported to somewhere or are they "top level"? if not, then the problem mentioned in #250 (comment) might be the reason for the warnings.

I think MiniCssExtractPlugin needs to provide a compare function like mentioned here #250 (comment) so we can decide on the conflicting order ourselves because with some imports its logicly impossible ensure correct order.

I feel the same.

[psyanite]

I am also using MiniCssExtractPlugin with ts-loader and experience seeing these warnings:

WARNING in chunk admin-site [mini-css-extract-plugin]
Conflicting order between:
 * css ../node_modules/css-loader!../node_modules/postcss-loader/lib!../node_modules/sass-loader/lib/loader.js!./controls/card.sass
 * css ../node_modules/css-loader!../node_modules/postcss-loader/lib!../node_modules/sass-loader/lib/loader.js!./components/container.sass
 * css ../node_modules/css-loader!../node_modules/postcss-loader/lib!../node_modules/sass-loader/lib/loader.js!./controls/logo.sass

But am unable to figure out if these are false-warnings

[felixmosh]

Is it possible to point out the problematic imports (the file name), or something else in-order to help solve this warning?

[alexander-akait]

Close in favor https://github.com/webpack-contrib/mini-css-extract-plugin/issues/362

[StarpTech]

In my case the order is relevant and it produces a broken html layout. How can I avoid it? I only import a single sass file per component in next.js.

[ruijielou]

This error can be avoided by separating the style files of common components into separate files for loading.

[psyanite]

Yeah that's what I don't understand. My error is for: card.sass container.sass logo.sass

but these three files do not share any css styles.

Has anyone able to change the code so the warning doesn't show anymore?

[phattranky]

I just reorder my imports of the conflicting components. Then the issues were solved.

My FullScreenQuizDialog conflict with others. So I try to move it to the bottom of the imports

[tylerrrkd]

ignoreOrder works well.

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],

[fsarter]

This warning is confusing, and difficulty to address. In my case, warning:

Conflicting order between:
 * css ./node_modules/css-loader??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/post
css-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs
.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/financial-comm/member-pricing.vue?vue&type=styl
e&index=0&id=1a72b65c&scoped=true&lang=less&
 * css ./node_modules/css-loader??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/post
css-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs
.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/pricing/views/components/over-pricing-dialog.vue?vue
&type=style&index=0&id=4851d13d&scoped=true&lang=less&

But it's not exactly caused by member-pricing or over-pricing-dialog component, it's index.vue and vip-info.vue where i imported member-pricing with different orders raise the warning.

So i think the correct steps to handle this issue is:

1. search one component listed by those warnings in your codebase.
2. if the component is imported in multiple files, check their order in the import block, make sure the order is consistent.
3. if warning is not eliminated, continue checking other components listed in those warnings following step 1 and 2.

Good luck!

[Marszed]

experiencing the same issue in my Nuxt project

nuxt@2.10.1 dependences extract-css-chunks-webpack-plugin@4.6.0

but extract-css-chunks-webpack-plugin@4.6.0 has error, like this issues-->extract-css-chunks-webpack-plugin, issues-->Nuxt

so, you can set nuxt@2.10.1 dependences extract-css-chunks-webpack-plugin@^4.5.2

i use yarn, so i soloved it by change yarn.lock dependences extract-css-chunks-webpack-plugin@^4.5.2

[samayo]

same error today

[bitttttten]

Also started to see this issue on one of our builds today, one that we had not run for a few days.

There are no clues about which file has the issue either 😬

[samayo]

Is there an alternative to mini-css-extract? anyone?

[valscion]

This issue has been resolved by the addition of ignoreOrder option: https://github.com/webpack-contrib/mini-css-extract-plugin/blob/v0.8.0/README.md#remove-order-warnings

Please open an issue in the repository of the tool you're using that uses mini-css-extract-plugin to discuss if they should use ignoreOrder.

I understand the maintainers here have understood that the warnings are difficult to decipher, and they don't currently need new comments to reflect that. See the comment by @sokra near the first comments in this issue thread https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126:

I must admit that the warning could be improved to point to the locations that need to be changed.

Please open a new issue if ignoreOrder is not working as expected, with reproduction steps, if you think there is an issue with that option.

[qertis]

reopen please

[samayo]

Btw, if anyone is seeing "popper.js not found error" or something similar, know this is not related to mini-css-extract. You just need to install that library. That was the issue in my case, it was unrelated to mini-css-extract even though the error was coming from it

[liuliuboy]

new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: true, ignoreOrder: true // Enable to remove warnings about conflicting order }), 实测可行

[webylb]

并没有解决我遇到的的问题

[nicooprat]

Tried to add ignoreOrder: true but I'm getting some Cannot read property 'createChildCompiler' of undefined errors, has anyone encountered the same issue? Looks like it's coming from the thread-loader plugin but I couldn't find any solution there.

[Hypnosphi]

Sort your imports to create a consistent order.

@sokra do you know any practical way to do that? As pointed out above, alphabetical order doesn't always work:

// a.entry.js
import './a.css'
import './b.css'

// b.entry.js
import './b.css'
import './c.js'

// c.js
import './a.css'

Here, all the imports are sorted alphabetically, but a.entry.js and b.entry.js have different order of CSS files

[julpat]

Still waitting for this 😇 🙏

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Solving this warnings by disable them globaly is wrong. The messages are useful when you have nested use of same components and then the order is important!

// Some.vue
import Decor from 'Decor.vue';
import SomethingDifferent from 'SomethingDifferent';

// SomethingDifferent.vue
import Decor from 'Decor.vue'; // completely different use of the same component

So the solution here is "lazy" loading (getting this from Webpack doc (?) not sure now)

// SomethingDifferent.vue
const Decor = () => import('Decor.vue');

[steveswork]

There is now an NPM package named @webkrafters/ordercss which tackles this issue.

Full disclosure: I initially created it to solve this very problem in one of my apps but decided to expand it and share it with everyone.

If this package helps anyone, please share it with others.

Thanks and good luck!

[cdll]

same issue here💔

[Nsandomeno]

same issue here💔

@cdll working on this too... will get back here if I find anything. Any luck for you?

[eyedean]

I wrote a detailed explanation of why this happens and what are the solutions at: https://stackoverflow.com/a/67579319

[9mm]

So how do we fix this when everything is ordered and the error still occurs, yet we don't just want to disable the warnings?

[benomatis]

NOTE FOR FUTURE READERS: See #250 (comment) for a more up-to-date comment

It felt easier to us to use a plugin called webpack-filter-warnings-plugin for this, so if anyone's curios, this is how this warning can be ignored:

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin'); 

const config = {
  plugins: [
    // Silence mini-css-extract-plugin generating lots of warnings for CSS ordering.
    // We use CSS modules that should not care for the order of CSS imports, so we
    // should be safe to ignore these.
    //
    // See: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
    new FilterWarningsPlugin({
      exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
    })
  ]
}

As you can see from our comment, we're not 100% sure we're safe but at least we try to document why this warning can be ignored. I suggest others filtering these warnings do something similar ☺️

This works, except the warning doesn't show Conflicting order between: anymore, it's just Conflicting order, so just remove the between: from the end before the last slash of the exclude property, and you should be good to go.