mini-css-extract-plugin throws "Conflicting order" errors during build

[dviry]

trafficstars

(react-scripts 2.0.4) Same as in this issue I am getting a lot of errors from the mini-css-extract-plugin when doing a CI build - which fails since no warnings are allowed. Since CRA does not allow customizing the WebPack plugin config, I cannot use the warningsFilters and the question about CRA also already popped up.

I am not sure what the CRA team can do about this - but maybe just keep an eye on it (or have it documented as a Known Issue) until WebPack somehow solves it.

PS: for now I am running "set CI=&&react-scripts build" to disable the CI build warnings limit.

[andriijas]

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

Like mentioned in the related issue https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126 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.

[holloway]

@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).

[Timer]

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.

[ryancogswell]

@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).

[ryancogswell]

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.

[bogdan-calapod]

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.

[stereobooster]

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 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250

[theZieger]

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.

[gonzofish]

@theZieger what's in Global.css?

[theZieger]

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

[gonzofish]

I'm wondering if importing them over and over is causing a headache? I can't get mine to stop spitting out errors either

[theZieger]

In my case it doesn't seem to be a problem importing Global.css over and over again in multiple components. And btw I don't get any warnings anymore after I applied the above changes I posted... But still discover smaller issues regarding the final output order.

[gonzofish]

In my case, I had to reorder my imports, but it's not clear why:

I went from:

import AudienceComposition from '../../../shared/components/AudienceComposition/AudienceComposition';
import MetricPicker from '../../../shared/components/Bb8MetricPicker/Bb8MetricPicker';
import BulmaMessage from '../../../shared/components/BulmaMessage/BulmaMessage';
import EntityCard from '../../../shared/containers/Bb8EntityCard/Bb8EntityCard';
import EntitySearch from '../../../shared/containers/EntitySearch/EntitySearch';

to

import MetricPicker from '../../../shared/components/Bb8MetricPicker/Bb8MetricPicker';
import BulmaMessage from '../../../shared/components/BulmaMessage/BulmaMessage';
import EntityCard from '../../../shared/containers/Bb8EntityCard/Bb8EntityCard';
import EntitySearch from '../../../shared/containers/EntitySearch/EntitySearch';
import AudienceComposition from '../../../shared/components/AudienceComposition/AudienceComposition';

Even as I look at the imports of SASS files from each of those files (and anything they import), I can't figure out what was causing problems. Because a SASS file that was used by a component AudienceComposition imported was causing conflicts with all of the other SASS files from MetricPicker, BulmaMEssage, EntityCard, and EntitySearch...even when I had removed all code from the SASS file...

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[rfearing]

I'm still having this issue too

[ryanashcraft]

This was one of the few reasons I needed to fork react-scripts. We use CSS modules so ordering doesn't really matter for us. And there's no clear way to address the warnings as the modules in conflict are in completely separate, very-distant parts of the parsed module tree.

[pelotom]

For users of CSS Modules it seems like ignoring the warnings (as described here) is a safe workaround.

[ryanashcraft]

@pelotom Indeed but it requires ejecting or forking.

[mAiNiNfEcTiOn]

Well we're also using CSS Modules (with dynamic imports) and also had this issue... So we decided to downgrade.

While downgrading got rid of the warnings, it did not get rid of the consequence of having this reported issue. We basically ran into cases where based on your starting page it would determine how the styles would be affected.

We kind of solved it by adding this to webpack's config:

  optimization: {
    /* ... */
    splitChunks: {
      chunks: 'all',
      name: false,
      cacheGroups: {
        styles: {
          name: false,
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        }
      },
    },
    runtimeChunk: true, // This line is just for you to know where I added the lines above.
  },

which resulted on certain common styles being moved to one chunk.

Now, is it the right way, or a way to solve issues? Probably not.... Just putting it out as either you guys will tell me "NO DON'T DO IT" or maybe it solves your problem.

[valscion]

Please note that my comment linked by @pelotom above does not reflect the opinions of webpack or mini-css-extract-plugin team. Don't let the "Member" highlight give me authority on that specific issue. I merely have that highlight as I'm maintaining a different webpack-contrib package, webpack-bundle-analyzer.

[feonit]

I tried to find the import place that invoke the trouble (by method exception) and after I replaced some strings annoyance is out, but this behavior still looks like some weird for me

[patientplatypus]

Yeah, I'm having this. Why?

[joa]

It seems like there are three solutions to this issue:

1. Eject and use custom warning filters
2. Sort all imports in all files of your code base alphabetically
3. Use CI=false which means you still get the warning but your pipelines won't freak out

It would be great if one could chose to suppress this warning OR if CI=true yarn build would simply have a 0-exit-code albeit the warnings -- without having to eject.

When using CSS modules one is probably not interested in any cascading overrides. At least it would go against the idea of using modules in the first place.

[lvl99]

We're consistently getting this inconsistent error message. It's hard to debug because am unsure how to better order the imports based off the error messages.

CSS modules is ideal for our current project because it will effectively also be a reusable component library across multiple apps. If we can't import the component-specific CSS per component JS file (and I personally am not a fan of styled-components as it makes it harder to customise based on pure CSS alone -- it forces one to get dirty in JS code to do CSS. It's just not appropriate for our project) then it kind of defeats the purpose of using CSS modules.

[designbyadrian]

@pelotom ignoring these errors is not a safe workaround, as the dev and prod might have CSS declarations in different order.

[slavagoreev]

I had the same problem. The solution was to rearrange imports in the top of the component or page that caused this kind of warning. I moved the import of buggy component to the last line so that the error disappeared.

Hope, this will help you.

[lvl99]

Just following up: the solution I came up with was to maintain a separate /src/styles.ts file whereby I import all the necessary CSS in the preferred order and put that import into my /index.tsx file. It's not an entirely elegant solution (because each component has its own imported CSS, so feels a bit weird doubling up the CSS imports) but it does allow me to remove the warning messages.

[alaycock]

Would a PR that suppresses this warning, for css/sass module files, be accepted?

For example, in my project I have this error:

chunk 1 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-6-3!./src/components/Component1/Component1.module.scss
 * css ./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/Component2/Component2.module.scss

But there will never be a conflict between those two files.

[SHRoberts91]

My issue is that I'm getting this error for packages in my node_modules:

chunk 0 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./node_modules/box-ui-elements/es/components/menu/Menu.scss
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./node_modules/box-ui-elements/es/components/dropdown-menu/MenuToggle.scss

chunk 1 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./node_modules/box-ui-elements/es/components/label/Label.scss
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./node_modules/box-ui-elements/es/components/datalist-item/DatalistItem.scss
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./node_modules/box-ui-elements/es/components/flyout/Flyout.scss

And since I have a CRA project the solutions given wouldn't work for me as far as I could tell. Any ideas?

[bugzpodder]

This is just a warning, you can ignore it. Make sure your CI flag is not set.

[sherlockwang]

I still got the same issue, and I'm sure that those file listed in the warnings don't have any interaction. Is there any possible solution to it?

[sapkra]

I think this PR should fix the problem but it's not released yet. https://github.com/webpack-contrib/mini-css-extract-plugin/pull/422

[sherlockwang]

I think this PR should fix the problem but it's not released yet. webpack-contrib/mini-css-extract-plugin#422

Cool. Thanks. Is there a release schedule?

[sapkra]

It was directly released after I posted my comment. So you can use version 0.8.0 and set the options documented in the README.

[GiovanniGiampaolo]

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.

SOLVED! Thanks

[fabienbranchel]

Since the PR was released and mini-css-extract-plugin 0.8.0, I still have this issue.

On my project, I also use storybook-react using 0.7.0 version of this plugin. I don't think so, but is it possible that this older version is use during the build ? Moreover, since this issue is still open, I guess 0.8.0 version don't fix it for CRA.

Is there someone else still experiencing it ?

Really a nightmare... :(

[h-jennings]

After a lot of searching around for a fix for this problem I came across this medium article which provides a method for explicitly declaring the order of your SASS imports within your project.

Consider this common folder structure for components:

components/
--| component-1
----| component-1.jsx
----| component-1.scss
---- index.js
--| component-2
--| component-3

When creating a new component I would typically import the component-1.scss into the component-1.jsx file like so:

import React from 'react'; 
import './component-1.scss';

function component1(props) {
// ...
}

This seems to cause issues of conflicting order when you use these components throughout your application.

As the article above suggests, instead of importing the component-1.scss directly into the component-1.jsx file, you should create a components.scss file at the root of your components/ folder.

Inside that components.scss declare your scss import like so:

@import './component-1/component-1.scss';
@import './component-2/component-2.scss';
@import './component-3/component-3.scss';

Then you want to @import that components.scss file into an index.scss which is referenced in your application.

Event with those changes your new folder structure should remain largely the same:

components/
--| component-1/
----| component-1.jsx
----| component-1.scss
---- index.js
--| component-2/
--| component-3/
--| components.scss

scss/
--| global/
----| global.scss
--| index.scss

Your newly created index.scss file should look something like this:

@import './global/global.scss';
@import '../components/components.scss';

And be imported into your projects index.js like so:

import React from 'react';
import '../scss/index.scss';

function App(props) {
  //...
}

To reiterate, this new SCSS architecture no longer requires you to import a components .scss file directly into the .jsx which is what causes those ordering issues. Instead, with this new architecture, you're explicitly declaring the order of your .scss component files in the components.scss file and then importing that file into the index.scss files.

No more conflicting order warnings! Hopefully this is helpful.

[gonzofish]

@h-jennings that would make sense...but now you'd be loading all of your site's CSS in a single chunk, which means users are loading a bunch of CSS they may not need

[h-jennings]

@gonzofish Yeah to be clear, this approach definitely doesn't address that. But rather, I just wanted to provide a clearer explanation of organizing your component styles in a way that avoids any ordering issues. Perhaps a hybrid approach as mentioned in this comment above would be worth looking into if you wanted to load css on a component level as needed.

[fa7ad]

After a lot of searching around for a fix for this problem I came across this medium article which provides a method for explicitly declaring the order of your SASS imports within your project.

Consider this common folder structure for components:

components/
--| component-1
----| component-1.jsx
----| component-1.scss
---- index.js
--| component-2
--| component-3

When creating a new component I would typically import the component-1.scss into the component-1.jsx file like so:

import React from 'react'; 
import './component-1.scss';

function component1(props) {
// ...
}

This seems to cause issues of conflicting order when you use these components throughout your application.

As the article above suggests, instead of importing the component-1.scss directly into the component-1.jsx file, you should create a components.scss file at the root of your components/ folder.

Inside that components.scss declare your scss import like so:

@import './component-1/component-1.scss';
@import './component-2/component-2.scss';
@import './component-3/component-3.scss';

Then you want to @import that components.scss file into an index.scss which is referenced in your application.

Event with those changes your new folder structure should remain largely the same:

components/
--| component-1/
----| component-1.jsx
----| component-1.scss
---- index.js
--| component-2/
--| component-3/
--| components.scss

scss/
--| global/
----| global.scss
--| index.scss

Your newly created index.scss file should look something like this:

@import './global/global.scss';
@import '../components/components.scss';

And be imported into your projects index.js like so:

import React from 'react';
import '../scss/index.scss';

function App(props) {
  //...
}

To reiterate, this new SCSS architecture no longer requires you to import a components .scss file directly into the .jsx which is what causes those ordering issues. Instead, with this new architecture, you're explicitly declaring the order of your .scss component files in the components.scss file and then importing that file into the index.scss files.

No more conflicting order warnings! Hopefully this is helpful.

That sounds like it would work, but how would that work with CSS modules?

[h-jennings]

@fa7ad I've never used CSS modules, so I'm not sure to be honest. Maybe someone who has could speak on that!

[AndrewBogdanovTSS]

I don't know about React, but I have this problem with a Vue app and it comes from a workflow of having 2 separate places for CSS - one is global css - which resides in separate CSS/SCSS files and other is in .vue file components. So if you want to blend those two together and than extract it into a single file - you can get into this case of conflicting order. Of course you won't get into such troubles if you just using one way or another, but the main question here is how to solve the issue without braking existing workflows. I will just give you a simple example where such workflow is required - imaging using SCSS version of Bootstrap in your project. You have to have imported Bootstrap scss assets as well as your own css that will come from component/jsx.

[meiminjun]

new MiniCssExtractPlugin({
      filename: assetsPath('css/[name].[contenthash].css'),
      allChunks: true,
      ignoreOrder: true       // **this is ok**
    }),

[enzoferey]

If you are using create-react-app and styled-components, you can do something like this using raw.macro:

import raw from 'raw.macro';

const myStyles = raw("./styles.css");

const MyComponent = () => {
    return <div><GlobalStyles /></div>;
}

const GlobalStyles = createGlobalStyle`
    ${myStyles}
`

[bulutfatih]

Is there any certain way to fix this? I'm using Next.js + Ant Design and I see a lot of warnings like this.

Conflicting order between:

• css ./node_modules/@zeit/next-css/node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/typography/style/index.less
• css ./node_modules/@zeit/next-css/node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/pagination/style/index.less
• css ./node_modules/@zeit/next-css/node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/spin/style/index.less

Also, pages sometimes don't display properly. I think it is because of this conflict error.

[Shaquu]

Is there any certain way to fix this? I'm using Next.js + Ant Design and I see a lot of warnings like this.

The same situation here. A lot of conflicts.

[ChuckJonas]

@bulutfatih did you ever figure anything out? Same issue (using antd & nextjs)

[bulutfatih]

@ChuckJonas unfortunately, I didn't find anything yet., I'm still searching for a solution.

[SashaDesigN]

My solution for Next.js is just to render all forms on client side, like:

class App extends React.Component {
    state = {
        mounted: false
    }

    componentDidMount(){
        this.setState({mounted: true})
    }

    render () {
        if(!this.mounted) return (<div></div>)
        // render below sensitive to this bug components
    }
}

I know, I know it's a bad approach but works for me well, I use it only for forms and doing other stuff on server side.

[cpouldev]

I have this issue too (I'm using Next.js). A workaround I found (as I see https://github.com/facebook/create-react-app/issues/5372#issuecomment-495509789 uses the same method too) is to put the css imports at the end of the imports.

for example, instead of

import css from './mycss.css'
import {Button} from 'components/Button'

I do

import {Button} from 'components/Button'
import css from './mycss.css'

And the warnings are gone. But its very counterproductive, especially if you have a ton of components.

[bulutfatih]

@cpouldev Thanks but it didn't work for me. Still showing errors.

[awibox]

I solved this problem with webpack settings:

     {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 2,
              modules: {
                mode: 'local',
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  flexbox: 'no-2009',
                }),
                require('postcss-modules-values'),
              ],
            },
          },
          'sass-loader',
        ],
      },

and:

  plugins: [
    htmlPlugin,
    new MiniCssExtractPlugin({
      filename: devMode ? './css/[name].css' : './css/[name].[hash].css',
      chunkFilename: devMode ? './css/[name].css' : './css/[name].[hash].css',
      ignoreOrder: true,
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

[ChuckJonas]

@awibox could you offer some explanation?

[awibox]

@ChuckJonas ignoreOrder: true in the plugin settings that will help to remove warnings about conflicting order

[wmaca]

You can always trace down which files are causing this problem, but this will be a fragile solution. If someone, by accident, change the order of an import, the warning will come back.

But, there is another way around it...

If the order is not a problem for you (e.g. you use CSS Modules) or if you know the correct order of your SCSS files, at the expense of increasing the size of one of your entrypoints, this can be worked around.

How to work around?

1. For each chuck order mini-css-extract-plugin is unable to fulfill, the warning will give you a list SCSS files (look at the end of each line).

2. Pick the files which are common on all lists, or any of the files if you have just one list.

3. Import those files in your app's entrypoint (src/index.js).

Doing so will properly force an order to those files, and the old chunks which were importing them won't need to do so anymore (as it will already be imported by the app's entrypoint).

[GermaVinsmoke]

If related to Antd then do these 2 things -

• If you import styles by specifying the style option of babel-plugin-import, change it from 'css' to true, which will import the less version of antd.

• If you import styles from 'antd/dist/antd.css', change it to antd/dist/antd.less.

• [Edit] - Importing css files at the last.

The next.config.js part can be checked from this nextjs-css-less-antd

[MalvinJay]

I solved this problem with webpack settings:

     {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 2,
              modules: {
                mode: 'local',
                localIdentName: '[name]__[local]--[hash:base64:5]',
              },
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  flexbox: 'no-2009',
                }),
                require('postcss-modules-values'),
              ],
            },
          },
          'sass-loader',
        ],
      },

and:

  plugins: [
    htmlPlugin,
    new MiniCssExtractPlugin({
      filename: devMode ? './css/[name].css' : './css/[name].[hash].css',
      chunkFilename: devMode ? './css/[name].css' : './css/[name].[hash].css',
      ignoreOrder: true,
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

@awibox Can you please share your final next.config.js file. Warnings are still preventing CI builds and it's quite irritating.

[paul-vd]

Can you please share your final next.config.js file. Warnings are still preventing CI builds and it's quite irritating.

Here is and example: https://github.com/vercel/next-plugins/issues/506#issuecomment-594351873

[YuFy1314]

Try this method. It may solve the problem. At least it looks like this on my side: Old configuration:

    optimization: {
        splitChunks: { // 将多入口的公共部分单独打包
            minChunks: 2,
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all',
                    reuseExistingChunk: true
                },
                default: false
            }
        }
    }

new configuration:

    optimization: {
        splitChunks: { // 将多入口的公共部分单独打包
            minChunks: 2,
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/,
                    reuseExistingChunk: true
                },
                default: false
            }
        }
    }

You can see that the difference is just "chunks: 'all',"

[juona]

Here's my story and how I traced and solved the problem.

In my case the warnings looked like this:

warn chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ............/src/components/listbox.module.scss
 * css ............/src/components/violations.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ............/src/components/modal.module.scss
 * css ............/src/components/register.module.scss

Here's what I did:

1. Take the first list of conflicts (i.e. listbox vs violations) and find where the conflicting SCSS files are used. In my case it was easy as they were only used in their respective Listbox and Violations components.
2. Find all the files which import, either directly or indirectly (i.e. via other components) the conflicting components. You should be able to find more than one such file, otherwise I'd expect there to not be any warning at all. Let's call these files "common ancestors".
3. If you inspect import ordering in these common ancestors, you should notice that the orderings in which the conflicting dependencies are imported differ among the ancestors. In my case CommonAncestor1 imported Listbox before Violations, whilst CommonAncestor2 imported Violations before Listbox. I got lucky as it was an easy spot, but if you have a complex application with lots of conflicts, then you're in for some good fun determining the culprits.

Anyway, this is the root of the issue - the compiler is confused since it does not know which CSS file to put first in the compiled output.

So obviously this is a very valid warning. However, if you are using modular CSS, then it is possibly safe to ignore or suppress the warning since the ordering of modular CSS should not matter, possibly even if you have some :global pseudo-selectors in there, because of style encapsulation. Although I have no idea how the compiler resolves the order, which is bad - you should own your products.

Do not dismiss this warning if you don't have CSS modules or you use :global at the root of the conflicting modules.

[gautamkrishnar]

Is there any way to filter this warning without ejecting the CRA?

[paul-vd]

Is there any way to filter this warning without ejecting the CRA?

@gautamkrishnar You can always opt to rewire you app (manipulate webpack) using react-app-rewired and customize-cra

1) Install react-app-rewired and customize-cra

$ yarn add react-app-rewired customize-cra mini-css-extract-plugin --dev

2) 'Flip' the existing calls to react-scripts in npm scripts for start, build and test

  /* package.json */
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

3) Create a config-overrides.js file in the root directory

/* config-overrides.js */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function override(config, env) {
  //do stuff with the webpack config...
   config.plugins.push(
      new MiniCssExtractPlugin({
        ignoreOrder: true // Enable to remove warnings about conflicting order
     })
    );
   return config;
}

4) Start the Dev Server

$ yarn start

[gautamkrishnar]

Awesome. Thanks @PaulPCIO. IMO this should be natively supported in CRA instead of using external plugins.

[vandelpavel]

Ignoring errors is almost always a bad ideas. I had recently the same issue and i found that was caused by a bad css. My advice to try to solve that problem is to: -Check if you have no scoped style; -Check if you have circular references on components and imports.

[xyy94813]

Maybe we can support a ENV variable to ignore the css order warning?

like IGNORE_CSS_ORDER_WARNING=false

I think it is the best solution currently.

For mini-css-extract-plugin, it don't known you use CSS Modules.

Chunk split and lazy load may cause style error when css order difference. It is extremely difficult to manually control the import sequence when you use split chunk.

[myxious]

Almost the same solution using craco instead of react-app-rewired:

1) Install craco:

yarn add @craco/craco

2) Create a craco.config.js file in your project the root directory with the following content:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        (plugin) => plugin instanceof MiniCssExtractPlugin,
      );
      instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;

      return webpackConfig;
    },
  }
}

3) Update the existing calls to react-scripts in the scripts section of your package.json file to use the craco CLI:

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

[xyy94813]

If you want to resolve the issue by sorting imports, you can try to use ESLint plugin -- eslint-plugin-simple-import-sort

[Garima18]

I was having same problem, and it was listing 2 CSS files. So I tried to combine and make one CSS file. this solved my problem.

[anujsingla]

Almost the same solution using craco instead of react-app-rewired:

1) Install craco:

yarn add @craco/craco

2) Create a craco.config.js file in your project the root directory with the following content:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        (plugin) => plugin instanceof MiniCssExtractPlugin,
      );
      instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;

      return webpackConfig;
    },
  }
}

3) Update the existing calls to react-scripts in the scripts section of your package.json file to use the craco CLI:

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

@myxious Thanks for your solution, I am also using craco. It is not working for me and getting css conflict error. I have updated code and it is updating webpack config. configure: (webpackConfig) => { const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find( (plugin) => plugin.constructor.name !== "MiniCssExtractPlugin", ); if (instanceOfMiniCssExtractPlugin) { instanceOfMiniCssExtractPlugin.options.ignoreOrder = true; } return webpackConfig; } Do we need to make any other changes.

[xyy94813]

@anujsingla Make sure your mini-css-extract-plugin support ignoreOrder.

mini-css-extract-plugin support ignoreOrder in v0.8.0.

And react-scripts upgrade mini-css-extract-plugin to v0.8.0 in v3.1.2

[cill-i-am]

@xyy94813 I'm getting an unhandled promise rejection on the latest version of react-scripts using the CRACO method

[xyy94813]

@Rocinante89 I am not using CRACO. But, you can show more error messages so that others can help you.

[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. After seeing this thread, I decided to expand it and share it with everyone. Because people should not be forced to use CSS-in-JS or any other scoped CSS paradigm if they don't want to.

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

Thanks and good luck!

[andoanwkm]

Almost the same solution using craco instead of react-app-rewired: 1) Install craco:

yarn add @craco/craco

2) Create a craco.config.js file in your project the root directory with the following content:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        (plugin) => plugin instanceof MiniCssExtractPlugin,
      );
      instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;

      return webpackConfig;
    },
  }
}

3) Update the existing calls to react-scripts in the scripts section of your package.json file to use the craco CLI:

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

@myxious Thanks for your solution, I am also using craco. It is not working for me and getting css conflict error. I have updated code and it is updating webpack config. configure: (webpackConfig) => { const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find( (plugin) => plugin.constructor.name !== "MiniCssExtractPlugin", ); if (instanceOfMiniCssExtractPlugin) { instanceOfMiniCssExtractPlugin.options.ignoreOrder = true; } return webpackConfig; } Do we need to make any other changes.

In my case, I use below code and it's works:

    const instanceOfMiniCssExtractPlugin = config.plugins.find(
      (plugin) => plugin.options && plugin.options.ignoreOrder != null,
    );
    instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;

[martinlynge]

In case you use the solution proposed by @myxious make sure to only override the MiniCssExtractPlugin configuration in production to avoid the following error: UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'options' of undefined

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === 'production') {
        const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
          plugin => plugin instanceof MiniCssExtractPlugin
        );

        instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
      }

      return webpackConfig;
    },
  },
};

[Vuliniar]

The same issue happened to us. The problem was easy to solve as the number of files that caused the error wasn't long. Basically, every component that was styled with CSS/SCSS modules and imported to another component, needed to be moved to the very bottom of the imports in that other component.

import React from 'react';

import CmpWithoutModules from '../CmpWithoutModules';
import moment from 'moment';

import StyledWithModules from '../StyledWithModules';

[uuykay]

Also getting this problem. Seems kind of ridiculous to be honest.

[JackGarrus]

Me and my team fixed this: in my case that was an import from another file bundled in a different chunk. Check if in the files you are working with have any strange import that shouldn't be there

[nazanin-bayati]

Me and my team fixed this: in my case that was an import from another file bundled in a different chunk. Check if in the files you are working with have any strange import that shouldn't be there

What do you mean by strange import? Can you tell us more about it? Thanks

[eyedean]

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

[an-parubets]

I also have same problem. I was try to use ESLint plugin eslint-plugin-simple-import-sort for resolving this issue, but but it is unsuccessful. I am using modules and this problem is not very valid.

[robertcasanova]

I just experienced this issue and I fixed it by removing Lazy loading on React routes. Importing the pages without React.lazy fixed the issue. I know is not a perfect solution but I spent the last two days messing around with import orders without success. I must dig into it... Hope can help someone!

[ArticB]

The same issue happened to us. The problem was easy to solve as the number of files that caused the error wasn't long. Basically, every component that was styled with CSS/SCSS modules and imported to another component, needed to be moved to the very bottom of the imports in that other component.

import React from 'react';

import CmpWithoutModules from '../CmpWithoutModules';
import moment from 'moment';

import StyledWithModules from '../StyledWithModules';

HAA! I was banging my head for over an hour to fix this just to find out that it was so simple.

[9mm]

how the heck are we supposed to fix this if every import is ordered?

[YunS-Stacy]

same issue and using craco as solution. however, encounter the same error as @martinlynge mentioned

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'options' of undefined

still having the issue using martinlynge's solution and later we fixed it by

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === "production") {
        const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
          (plugin) => plugin.constructor.name === "MiniCssExtractPlugin",
        );

        if (instanceOfMiniCssExtractPlugin) {
          instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
        }
      }

      return webpackConfig;
    },
  },
};

[rob-gordon]

I recently had this problem and decided to figure out which import order was causing the bug. I figured I would leave my process here in case it's helpful for someone in the future.

Here's the error I had:

14:04:48.445 | chunk 2 [mini-css-extract-plugin]
-- | --
14:04:48.446 | Conflicting order. Following module has been added:
14:04:48.446 | * css ../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!../node_modules/postcss-loader/src??postcss!./src/components/Graph.module.css
14:04:48.446 | despite it was not able to fulfill desired ordering with these modules:
14:04:48.446 | * css ../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!../node_modules/postcss-loader/src??postcss!./src/components/Spinner.module.css
14:04:48.446 | - couldn't fulfill desired order of chunk group(s)
14:04:48.446 | chunk 2 [mini-css-extract-plugin]
14:04:48.446 | Conflicting order. Following module has been added:
14:04:48.446 | * css ../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!../node_modules/postcss-loader/src??postcss!./src/components/GraphWrapper.module.css
14:04:48.447 | despite it was not able to fulfill desired ordering with these modules:
14:04:48.447 | * css ../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!../node_modules/postcss-loader/src??postcss!./src/components/Spinner.module.css
14:04:48.447 | - couldn't fulfill desired order of chunk group(s)
14:04:48.447 | chunk 2 [mini-css-extract-plugin]
14:04:48.447 | Conflicting order. Following module has been added:
14:04:48.447 | * css ../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!../node_modules/postcss-loader/src??postcss!./src/components/Spinner.module.css
14:04:48.447 | despite it was not able to fulfill desired ordering with these modules:
14:04:48.447 | * css ../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!../node_modules/postcss-loader/src??postcss!./src/components/GraphOptionsBar.module.css
14:04:48.447 | - couldn't fulfill desired order of chunk group(s)

Remove cruft - You can clear away the timestamps and error text pretty quickly and see that there are pairs of files which have been imported in different orders at some point during the build process.

Graph.module.css
Spinner.module.css

GraphWrapper.module.css
Spinner.module.css

Spinner.module.css
GraphOptionsBar.module.css

In my case I can see that the Spinner module and a few Graph-related modules are causing the problem.

Visualize - Running npx ffdeptree --filename src/index.tsx --directory src --fullscreen --filter module opens up an interactive visualization of the import structure. I found it helpful to exclude .module.css files because they added clutter. (Note: that only works if you're using [component].module.css alongside each [component].js/ts). .

Sort Using the visualization, I found the first two conflicting imports: Spinner and Graph and moved them next to each other. Then I began bringing their parent files closer until I found their common ancestor. Despite the clutter, this was still enough to determine the source of which imports in which files needed to be reversed to avoid the conflict.

For instance in the pic below I can see that CurrentTab needs to be imported before Graph in Main in order to preserve order.

Hopefully this process can help someone else in the future 👍🏻

[steelow]

The @webkrafters/ordercss npm package deals with this type of issue. https://www.npmjs.com/package/@webkrafters/ordercss

[pengcc]

Just in case, someone is still struggling with this issue, please try

plugins: [
   new MiniCssExtractPlugin({
       ignoreOrder: true
    })
]

You will not see the warnings anymore with this configuration. But I don't figure out what is the exact reason for this issue. And I got the warning after I used React.lazy to import the components dynamically.

[magnusarinell]

My problem was that I imported the same module.scss file from multiple React components. After copy and rename of the module.css file, and changing the imports, the warning went away.

[kdydo]

Just in case, someone is still struggling with this issue, please try

plugins: [
   new MiniCssExtractPlugin({
       ignoreOrder: true
    })
]

You will not see the warnings anymore with this configuration. But I don't figure out what is the exact reason for this issue. And I got the warning after I used React.lazy to import the components dynamically.

if I close my eyes the error also goes away

[samueldaraho]

new MiniCssExtractPlugin({ ignoreOrder: true })

@kdydo Where did you insert these lines of code?

[NicoleJaneway]

@samueldaraho in webpack.config.js

[ozkary]

Adding some thoughts here. I have seen this problem take place when there is a circular reference in imports. For example, FileA has imports from FileB and FileB has imports from FileA. This triggers that error downstream when those files are imported by UI components.

[puopg]

Just a thought, but if we are using CSS Modules, as stated above, does it really matter about the order? Assuming things are scoped to components, no wild uses of globals, I feel like it should be totally valid to just set ignoreOrder: true.

Counter examples welcomed, but just in case im misunderstanding something, I feel like the conflicting order error is more for projects that don't have that luxury that CSS modules or other similar approaches provide.

[ozkary]

This error happens frequently when the sequence of imports is not the same in all containers/modules, so the code split finds an ambiguous pattern and raises the warning conflicts.

As a simple example, take a look at these two modules:

// Module 1

Import toolbar
Import taskbar
Import notifications

// Module 2

Import CompositeComponent  /*CONFLICT ABOUT TO SHOW*/
Import toolbar
Import taskbar

// CompositeComponent

Import notifications

If you take a look at this case, module 2 imports a new composite component at the top, which imports the notification component. This essentially brings the notification import ahead of the toolbar and taskbar, which is not what module 1 is doing.

In this case, the conflict will be with notification vs toolbar and taskbar as the warning message probably indicates. To fix this simple example, move the CompositeComponent to the end of the imports, which essentially brings the notification import to the end

// Module 2

Import toolbar
Import taskbar
Import CompositeComponent