ant-design: [mini-css-extract-plugin] Conflicting order between:

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.

+1 on using with Next.js!

Duplicate of #14895

• 1 on using with Next.js

I have found a solution for this problem ( antd + less + next )

next.config.js

const withLess = require('@zeit/next-less')

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals)
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader'
      })
    }
    return config
  }
})

.babelrc

{
  "presets": ["next/babel"]
}

pages/_app.js

import '../styles/antd-custom.less' // includes antd style and our customization
import React from 'react'
import { Button } from 'antd'

function MyApp (props) {

  return (
    <Button>OK</Button>
  )
}

export default MyApp

antd-custom.less

@import "~antd/dist/antd.less";
@primary-color: #52c41a;

For those who uses react-app-rewired or analogues and sticks to go disable mini-css-extract-plugin warning way:

1. make sure you have "mini-css-extract-plugin": "^0.8.0", otherwise add it (there’s an extra flag in this version to skip ordering warnings)
2. add this ~(awful hack)~ to your config-overrides.js:

  // force react-scripts to use newer version of `mini-css-extract-plugin` and ignore css ordering warnings
  // (related to issue: https://github.com/facok/create-react-app/issues/5372)
  for (let i = 0; i < config.plugins.length; i++) {
    const p = config.plugins[i]
    if(!!p.constructor && p.constructor.name === MiniCssExtractPlugin.name) {
      const miniCssExtractOptions = {...p.options, ignoreOrder: true}
      config.plugins[i] = new MiniCssExtractPlugin(miniCssExtractOptions)
      break
    }
  }

@THPubs The simple way is just adding webpack-filter-warnings-plugin to ignore this warning if no other effect.

    config.plugins.push(
      new FilterWarningsPlugin({
        exclude: /Conflicting order/,
      })
    )

We’re experiencing this error as well. The only solution was to override the CI environment variable and set it to false in my CI Pipeline in order to get the build to pass.

@jlozanoher I think you have the warning because you import the antdesign style in .babelrc and in next.config.js.

Try to remove import of Less in .babelrc and in next.config.js.

In your _app.js import your custom less file, and in your less file import default antdesign less.

next.config.js :

/* eslint-disable */
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const fs = require("fs");
const path = require("path");
const nextEnv = require("next-env");
const dotenvLoad = require("dotenv-load");

// .env support
dotenvLoad();
const withNextEnv = nextEnv();

// Where your antd-custom.less file lives
//const themeVariables = lessToJS(
//  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
//);

const withTM = require("next-transpile-modules")([
  "@formatjs/intl-relativetimeformat",
  "@formatjs/intl-utils",
  "react-intl",
  "intl-format-cache",
  "intl-messageformat-parser",
  "intl-messageformat",
]);

module.exports = withNextEnv(
  withTM(
    withFonts(
      withCSS({
        cssModules: true,
        ...withLess({
          lessLoaderOptions: {
            // sourceMap: true,
            javascriptEnabled: true,
           // modifyVars: themeVariables, // make your antd custom effective
            importLoaders: 3,
          },
          cssLoaderOptions: {
            importLoaders: 3,
            localIdentName: "[local]___[hash:base64:5]",
          },
          webpack: (config, { isServer }) => {
            config.plugins = config.plugins || [];
            if (isServer) {
              const antStyles = /antd\/.*?\/style.*?/;
              const origExternals = [...config.externals];
              config.externals = [
                (context, request, callback) => {
                  if (request.match(antStyles)) return callback();
                  if (typeof origExternals[0] === "function") {
                    origExternals[0](context, request, callback);
                  } else {
                    callback();
                  }
                },
                ...(typeof origExternals[0] === "function"
                  ? []
                  : origExternals),
              ];

              config.module.rules.unshift({
                test: antStyles,
                use: "null-loader",
              });
            }

            config.plugins.push(new AntdDayjsWebpackPlugin());
            return config;
          },
        }),
      })
    )
  )
);

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": true
      }
    ]
  ]
}

your custom less file :

@import "~antd/dist/antd.less";

And in pages/_app.js import your less file

@ashbuilds Check my example on codesandbox here i have just one warning during the build but this is normal

next.config.js

/* eslint-disable */
const withLess = require("@zeit/next-less");
const withCss = require("@zeit/next-css");

module.exports = withCss({
  cssModules:true,
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true
    },
    webpack: (config, { isServer }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === "function") {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === "function" ? [] : origExternals)
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: "null-loader"
        });
      }
      return config;
    }
  })
})

Thats work like a charm 👍

@GermaVinsmoke ,

Already have babel-plugin-import set to style: true. Still have this problem. (Note: I’m using Gatsby, not next, but I believe the issue occurs regardless.)

@qiwang97 I don’t think that’s a good idea. I’m missing some styles during the first page load. They load only after re-loading.

Also seeing this with gatsbyjs

@hassansaadfr that is the issue, that we failed to get it work all together: Ant + Less + Next + CSS modules.

So, I investigate this issue more deeply. And sure that this is problem is MY styles. AFAIK, ant generate one bundle css or chunk per route (depends on webpack configuration). And it’s not same as in Material-UI which inject and encapsulate styles per component. In case with ant you need to provide this encapsulation by self. It’s can be unique class-wrapper for each component or just define all your styles in sigle file

@Mohammed-Poolwla Can i see your next.config.js and your antd-custom.less too ?

Can we connect via skype or any medium? so that I show you my code.

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

With NextJS 11.0 with Less , I’ve found excellent success with the following plugin https://github.com/SolidZORO/next-plugin-antd-less

Repo example: https://github.com/SolidZORO/mkn

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.

+1 on using with Next.js. I have same issue!

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!

@hassansaadfr your suggestions were the missing key ! Voilá. Now there are no warnings and no needs of pages refreshing for broken styles.

@hassansaadfr here is the code

{ “presets”: [“next/babel”] }

@Mohammed-Poolwla show me your code. Or send me a codesandbox 👍

@hassansaadfr Hi, Just tried the last fix you posted. Still the same warning.

I think this issue needs to be opened. It’s still happening.