Are you using 3rd party styling library like antd, bootstrap or anything else?

Like mentioned in the related issue webpack-contrib/mini-css-extract-plugin#250 (comment) the problem should not just be ignored by disabling and hiding the warnings but addressing the source cause instead, its not healthy to have fragile and inconsistent builds.

@dviry fyi I solved this by importing all CSS from a single file, and for code-split styles I'll migrate to a CSS-in-JS approach (probably Glamor styled-components).

Yeah, this is a very valid problem. A light change in your code could alter the cascading effects of your CSS, so this is warranted. Maybe some docs on how to fix it would be nice.

@Timer This seems like more than a documentation problem. I'm working on un-ejecting, but couldn't before 2.0 because of using Sass and CSS modules. Now with 2.0, I'm getting a bunch of these warnings, but we are using CSS modules for everything so there's no chance of the order actually being important (we aren't using any global styles -- just CSS classes).

In our case, I've worked around this by importing within index.js the components that directly use the CSS files that the warnings were complaining about. This resolves the order ambiguity and in my case, the components are shared pieces that are fine to be in my "main" chunk.

I also have this problem, and the error message is utterly useless and frustrating. On a large project it isn't feasible to randomly start requiring the devs to update their CSS based on arbitrary rules.

I'm using this with SCSS, and I'm even more confused on what it wants from me. The linked issue doesn't help much either.

chunk 0 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/form.module.css
 * css ./node_modules/css-loader??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/components/Footer/Footer.module.css

We use CSS Modules. The problem is in our code, but it is hard to understand what exactly is the issue. It complains about order of css imports in asset graph, but which exactly files?

Related webpack-contrib/mini-css-extract-plugin#250

I also had an issue with the mini-css-extract-plugin warning about a confliction order. Good thing was I'm in complete control of the component library we are using. But finding the correct spot where the problem occurs was really tough. I'm not an expert regarding webpack and neither the mini-css-extract-plugin or any of this. That's why I use CRA in the first place - I don't want to deal in detail with webpack and it's plugin ecosystem.

Nonetheless I was able to fix my component library. I'll just leave this here, so it may be some help to others hopefully.

Before the change:

BaseButton.js

import React from 'react';
import classnames from '../../../classnames';

import '../../../global/Global.css';
import './BaseButton.css';

export default function BaseButton({ children, type, className, ...other }) {
  return (
    <button
      className={classnames('base-button', className)}
      type={type}
      {...other}
    >
      {children}
    </button>
  );
}
BaseButton.defaultProps = {
  /** the type of the button */
  type: 'button'
};

IconButton.js

import React from 'react';

import BaseButton from '../BaseButton/BaseButton';
import classnames from '../../../classnames';

import '../../../global/Global.css';
import './IconButton.css';

export default function IconButton({ className, ...props }) {
  return (
    <BaseButton className={classnames('icon-button', className)} {...props} />
  );
}

When I used the components in that way, the CSS generated on build was not in the order I suspected it to be. When looking at the code of IconButton.js I would assume that the build process would put BaseButton.css before IconButton.css. But in fact it was in the wrong order ... this led to wrongly applied CSS rules (because cascading). And yeah maybe I should move on to use CSS Modules.

Anyway her my solution - even though I can't explain why this works now:

BaseButton.js

import React from 'react';
import classnames from '../../../classnames';

export default function BaseButton({ children, type, className, ...other }) {
  return (
    <button
      className={classnames('base-button', className)}
      type={type}
      {...other}
    >
      {children}
    </button>
  );
}
BaseButton.defaultProps = {
  /** the type of the button */
  type: 'button'
};

IconButton.js

import React from 'react';

import BaseButton from '../BaseButton/BaseButton';
import classnames from '../../../classnames';

import '../../../global/Global.css';
import '../BaseButton/BaseButton.css';
import './IconButton.css';

export default function IconButton({ className, ...props }) {
  return (
    <BaseButton className={classnames('icon-button', className)} {...props} />
  );
}

Maybe one of you can explain this to me or maybe this even helps you finding a similiar solution on your projects. Just wanted to share ... and this is the first issue I found regarding CRA and mini-css-extract-plugin.

@theZieger what's in Global.css?

@gonzofish some normalize styles but mostly custom properties (CSS variables)

I also got this issues, in my 5-6 files,
So, what i did
I create a global scss file and put all the css code in that file and delete the other,
this is how this issues got resolved

Here's my understand and solution to the issue. It's not very straightforward because it requires you to understand how the imports appear in the code, in the entire import tree.

What's causing them?

Context:

• webpack attempts to create CSS files shared among entries
• order matters in CSS, e.g.: a{color: red; color: blue}

If a build entry imports 2.css; 1.css and the other 1.css; 2.css, the generated file can only follow one of the orders; That's what the error means.

What do they cause?

If the styles actually overlapped each other, the style imported later (in the source code) wouldn't be applied because it still appeared earlier in the output CSS file.

Fix

Ensure that the order is always the same. Example:

Conflicting order. Following module has been added:
 * css /node_modules/react-image-crop/src/ReactCrop.scss
despite it was not able to fulfill desired ordering with these modules:
 * css /node_modules/@fortawesome/fontawesome-svg-core/styles.css
   - couldn't fulfill desired order of chunk group(s) isolated/EphemeralFormContent
   - while fulfilling desired order of chunk group(s) isolated/CustomFormComponent

You have to figure out which packages lead to ReactCrop.scss and fontawesome-svg-core.css. In this case, I opened the two entry points for the mentioned chunks

1. open EphemeralFormContent.ts and CustomFormComponent.ts
2. among the imports, locate the one that eventually leads to ReactCrop.scss
3. in this case ImageCropWidget, move it to the top of the file, in both EphemeralFormContent.ts and CustomFormComponent.ts
4. do the same for the fontawesome-svg-core importer, if the error hasn't been fixed already