New version 0.4.2 capture lot of warnings

[nuintun]

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

[luqimin]

experiencing the same issue

[alexander-akait]

Due https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L459

[jsg2021]

What does this warning mean? How do we resolve it?

[sokra]

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

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.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

[wende60]

also got these "conflicting order between " while compiling and a rollback to 0.4.1 solved the problem...

[alexander-akait]

@wende60 you should solve order problem, not downgrade

[wende60]

@evilebottnawi unfortunally i do not even understand what i have to order here... the loaders? Maybe you can give me a hint...

[alexander-akait]

@wende60 looks above and read post https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126

[wende60]

@evilebottnawi do i understand it right: i should play around with the order of imports in the file that is - maybe - the location? Ok, will tryout... thanks

[timothywisdom]

We used the sort-import plugin for VS Code to insure our entire team is importing modules in the same order. https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports

Unfortunately, even after insuring the order is the same, we still see these warnings from the mini-css-extract-plugin

[michael-ciniawsky]

@timothywisdom Sorting imports/modules per file (within) !== Import/Module Order in the Import/Module Tree/Graph (in relation to other files)

[jsg2021]

This seems like an unreasonable request (to ensure order within our graph)... we need a way to turn this off for projects that don't care. For example, in my projects each component's styles are self contained so order is only important within each component. (each component has a very unique class name root and all selectors are scoped to them)

[timothywisdom]

I'm confused - how do I sort "Import/Module Order in the Import/Module Tree/Graph"?

[jsg2021]

I think you would have to layout all your imports and make sure to always import things in the same order following the tree traversal order. (Not ideal)

[timothywisdom]

I believe I have done that via the sort-imports plugin for VS Code. This insures all imported modules are imported via the same order logic in every file. But according to @michael-ciniawsky, that's not good enough so I'm not sure how to proceed.

Edit: actually, I'm sorting them alphabetically, not by tree-traversal order. That would be a nightmare to figure out for every file

[michael-ciniawsky]

It's very inconvenient at best and realistically unmanagable at a certain project size. That's what CSS Module (automatically) or a CSS naming convention (e.g BEM/ITCSS(Namspace + BEM)) (manually) are for. Nevertheless if one uses CSS without particular care on the matter he/she likely runs into issue with the CSS Cascade and there should be a warning at least (optional)

@timothywisdom It's always hard to tell why you get these warnings and where within your project. I'm not saying sorting them for every file doesn't eventually help, but it definitely will not solve all issues.

See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

[ulivz]

This was truly a bug I think. I have following structure:

├── ActionSheetCard
│   ├── index.js
│   └── index.less
├── CardWrap
│   └── index.js
├── ImageView
│   └── index.js
├── Request
│   ├── index.js
│   └── index.less
├── ToAlipay
│   ├── index.js
│   └── index.less
├── ToNewUrl
│   ├── index.js
│   └── index.less
├── color.less
└── index.js

Each index.less was imported by its adjacent index.js, but this warning was still here:

chunk vendors [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/lib/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/action-sheet/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/toast/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/button/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/white-space/style/index.less

[jsg2021]

@ulivz the warning output you gave doesn't line up with your example structure.

[archiewx]

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

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.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

stats.warningsFilter not warningFilter

[LovaszNorbertM]

Thanks for the support offered for Webpack 4 , ref this . Very good solution , hope you get the sarcasm .

[Cap32]

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

Is there any way to locate which modules I used table before button, and which button before table?

[luxueyan]

I have the same problem. But when use this way 'Sort your imports to create a consistent order' is ok

[TheDutchCoder]

Okay after some more digging it seems importing everything in a similar order (e.g. alphabetically) seems to fix it, but you also have to order them by "directory" so to speak.

For example I have elements, components and utilities. If I switch those around while importing them (even if they're alphabetically ordered within their group) I get warnings.

Otherwise it's all good. Would be nice to get a better message (e.g. the source of the conflict) to resolve it though.

[holloway]

create-react-app@2 is nearly out and it uses this plugin, and I'm not sure sure if we can configure stats.warningsFilter to disable it either.

[leinelissen]

Hey guys, I've struggled with hiding this warning with Next 7, as it uses friendly-errors-webpack-plugin and I could not get it working with the warningsFilter. Thanks to this helpful issue I've managed to completely hide them.

// Define the class
class FilterPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.afterEmit.tap(
      'FilterPlugin',
      (compilation) => {
        compilation.warnings = (compilation.warnings).filter(
          warning => !this.options.filter.test(warning.message)
        );
      }
    );
  }
}

// Instantiate the plugin and add it as a Webpack plugin
new FilterPlugin({ filter: /chunk styles \[mini-css-extract-plugin]\nConflicting order between:/ }),

[tomlagier]

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

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.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

We just upgraded to WP4, and are getting around ~80 of these warnings, between up to 9 or 10 files at a time. How do you suggest we address this? Manually figuring out how to keep our imports consistent across a tree containing hundreds of components is a non-starter for us, we need some sort of automated solution, or at the very least, we need the ability to get some context about where the files are conflicting.

How do you keep import order straight on a project of any significant size?

edit: I should not that our preference is to not just ignore the warning - we had CSS module order change, which caused a number of CSS bugs as a part of the 0.4.0 -> 0.4.3 upgrade. Clearly, we need to ensure that our module order is stable, trying to understand if that's even possible using this plugin in a large project.

edit2: Something we are discussing is forking the plugin, and allowing the ordering method (here) to be overridden by the user. This would allow us to continue receiving upstream updates to the plugin but preserve the 0.4.0 module ordering. This isn't ideal because we'd be re-introducing the issue causing the module ordering change in the first place, but would give us a little more time to figure out a way to sanely ensure that our CSS is either a) correctly ordered or b) order independent.

[Detachment]

@leinelissen Which file should I define this class and how to use it? thanks

[leinelissen]

@Detachment This should be a part of the plugins section of your Webpack config.

[aaronatmycujoo]

I am using css modules so surely the orderings are irrelevant. What is the proposed solution for those that compose classes from other files?

[zhang-xiao]

I tried 0.4.1 that can fix the warnings, but I still confuse why this happens...

[missalyss]

I've been trying to ages to try and ignore the warnings; I've gotten it turned off in the terminal, but I'm using Webpack-Dev-Server, and they're also logging to the browser console. Has anyone found a way to make Webpack-Dev-Server respect stats.warningsFilter?

[jsg2021]

@missalyss Typically, the dev-mode config uses style-loader instead which bypasses all this.

[missalyss]

Typically, the dev-mode config uses style-loader instead which bypasses all this.

@jsg2021 What do you mean by bypasses all this? Do you mean bypasses stats.warningsFilter? Because dev mode is the only place where my errors are showing up.. I did file an issue with WDS https://github.com/webpack/webpack-dev-server/issues/1557

[jsg2021]

@missalyss What I mean is: You can have two webpack configs, or logic altering the loader definition based on NODE_ENV... In the config for dev mode, you would not have mini-css-extract-plugin’s loader ... you would sub it with style-loader

[cansin]

We have a very large project where we keep our imports alphabetically ordered "per file" (which understandably does not address the problem here). I agree with the above comments. I do not think it is reasonable to try to keep the imports ordered within the whole graph. But, I also understand the indeterministic nature of the problem as is.

I think the plugin should allow an option where we can define a comparison function so that the order can be deterministic between such cases, instead of spitting out a WARNING. Wdyt?

[mAiNiNfEcTiOn]

In our case, we're doing/using:

• Dynamic imports and with it, chunk splitting
• CSS Modules (SASS -> CSS, then importing the CSS on JS 😉)

With this change we're locked on using the previous version! 🙂

[stereobooster]

Do I understand it right that ref--18-2 stands for line 18, column 2?

[ScottAgirs]

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

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.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

Hey Tobias, is there a link to a tutorial that explains in more detail how could I go about sorting out imports to create a consistent order?

[peetzweg]

@sokra Okay this breaks my CI all the time. Not able to resolve this by reordering imports. Where to specifically set this? stats.warningFilter Can't find anything in the documentation, module options, rules? I'm using CRA, I guess I have to eject my app to resolve this, which sucks ... 🤷‍♂️

And is it actually stats.warningFilter or stats.warningsFilter as @zsirfs pointed out? https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-421989979

[alexander-akait]

@Pczek should works with stats.warningFilter

[peetzweg]

@evilebottnawi where should I put this? I have no clue. Could you give me a more complete example? Is this a webpack option of some sort?

[alexander-akait]

@Pczek https://webpack.js.org/configuration/stats/#stats

[valscion]

NOTE FOR FUTURE READERS: See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-544898772 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 ☺️

[events-jonas-chrisw]

Got the same issue here too.

Don't want rollback the version. I'm using Vue CLI 3 so there is no easy way to filter the warnings.

I'd fix the code (vue with many components) but there is no easy way to see where the issues lie, with over 100 components...

[hezhongfeng]

@events-jonas-chrisw me too.I use FilterWarningsPlugin,but it don't work .Use inspect find that the config is

    /* config.plugin('copy') */
    new CopyWebpackPlugin(
      [
        {
          from: 'D:\\svn\\biz-mgmt\\branches\\v2.1.0\\public',
          to: 'D:\\svn\\biz-mgmt\\branches\\v2.1.0\\dist',
          toType: 'dir',
          ignore: [
            'index.html',
            '.DS_Store'
          ]
        }
      ]
    ),
    {
      exclude: [
        /mini-css-extract-plugin[^]*Conflicting order between:/
      ]
    }

have no FilterWarningsPlugin

[hezhongfeng]

@events-jonas-chrisw this is okay.

class CustomFilterPlugin {
  constructor({ exclude }) {
    this.exclude = exclude;
  }

  apply(compiler) {
    compiler.hooks.afterEmit.tap('CustomFilterPlugin', compilation => {
      compilation.warnings = compilation.warnings.filter(warning => !this.exclude.test(warning.message));
    });
  }
};
// ...
  configureWebpack: {
    plugins: [
      new CustomFilterPlugin({
        exclude: /Conflicting order between:/
      })
    ]
  }

[nuclearglow]

To alleviate the hundreds of warnings of conflicting order which we handle by CSS scoping, we use a warningsFilter: warningsFilter: (warning) => /Conflicting order between/gm.test(warning)

[libbGit]

我们正在尝试生成一个CSS文件，但您的代码库对这些模块有多种可能的排序。

在这种情况下，您table之前button在一个位置使用过，button之前table在另一个位置使用过 我们需要为这些生成单个CSS文件，并且无法确定哪个应该是第一个。在这种情况下，我们放在table前面button。但这是毫无理由选择的。在未来的构建中，我们可以决定另一种方式。但是，由于CSS关注规则顺序，因此当CSS无缘无故地改变时，这可能会导致问题。

因此，不定义明确的订单会导致脆弱的构建，这就是我们在此处显示警告的原因。

你可以做两件事：

对导入进行排序以创建一致的订单。我必须承认可以改进警告以指向需要更改的位置。

stats.warningFilter当这些样式的顺序无关紧要时，忽略警告。也许最终会添加一个选项来直接标记与顺序无关的样式。 so we can ignore this warning? or we can modify vue.config.js to clean out warning?

[libbGit]

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

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.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

on vue-cli3，how do i use stats.warningFilter on vue.config.js?

[hezhongfeng]

@libbGit Look my comment.