ant-design: Compile warning: chunk styles [mini-css-extract-plugin] Conflicting order between ...

This warning can not be reproduce in your online env, so I submit directly.

Problem

I’m using Ant Design in a Next.js project. I’m using babel-plugin-import to load antd components on demand. It’s ok to show the first page, but when switch to another, there have the following warnings.

warning

chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/button/style/index.less
 * css ./node_modules/css-loader??ref--5-2!./node_modules/less-loader/dist/cjs.js??ref--5-3!./node_modules/antd/lib/dropdown/style/index.less

And the page’s style is not correct, it became ok after refresh.

I also got the following warnings when build my project.

➜  web git:(master) ✗ npm run build

> web@1.0.0 build /Users/jagger/projects/jwpay/web
> next build


✔ Client
  Compiled successfully in 12.77s

✔ Server
  Compiled successfully in 8.64s

> Using external babel configuration
> Location: "/Users/jagger/projects/jwpay/web/.babelrc"
> Emitted warnings from webpack
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/button/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/dropdown/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/dropdown/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/menu/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
Error: chunk commons [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/tooltip/style/index.less
 * css ./node_modules/css-loader??ref--5-1!./node_modules/less-loader/dist/cjs.js??ref--5-2!./node_modules/antd/lib/icon/style/index.less
    at MiniCssExtractPlugin.renderContentAsset (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:342:37)
    at Object.render (/Users/jagger/projects/jwpay/web/node_modules/mini-css-extract-plugin/dist/index.js:173:32)
    at Compilation.createChunkAssets (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:2429:29)
    at hooks.optimizeTree.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1299:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/jagger/projects/jwpay/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at Promise.all.then (/Users/jagger/projects/jwpay/web/node_modules/webpack/lib/DynamicEntryPlugin.js:74:20)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
 ┌ /
 ├ /_app
 ├ /_document
 ├ /_error
 ├ /login
 └ /register

Env

package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "LOG_API_REQUEST=y node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-regular-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "ant-design-pro": "^2.2.1",
    "antd": "^3.13.2",
    "babel-plugin-import": "^1.11.0",
    "bootstrap": "^4.1.3",
    "express": "^4.16.4",
    "i": "^0.3.6",
    "isomorphic-unfetch": "^3.0.0",
    "less": "^3.9.0",
    "less-vars-to-js": "^1.3.0",
    "next": "^8.0.1",
    "node-sass": "^4.10.0",
    "npm": "^6.4.1",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "http-proxy-middleware": "^0.19.1",
    "redux-devtools-extension": "^2.13.5"
  }
}

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      },
      "antd"
    ],
    [
      "import",
      {
        "libraryName": "ant-design-pro",
        "style": true,
        "camel2DashComponentName": false,
      },
      "ant-design-pro"
    ]
  ]
}

next.config.js

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { }
}

const isProd = process.env.NODE_ENV === 'production'

module.exports = withLess(withSass(withCSS({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: lessToJS(
      fs.readFileSync(path.resolve(__dirname, './assets/antd.less'), 'utf8')
    ),
  },
})))

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 37 (11 by maintainers)

Most upvoted comments

Nice to see that half of the people here are responding in chinese (or whatever it is). Next time I open a ticket it will be in italian.

提个 Issue 需要设这么高的门槛吗?从没见过哪个开源项目要求这么严格。不是所有项目都方便通过在线演示,这种编译和打包的错误,已经描述得很清楚了,很容易就重现。

Hello @jaggerwang, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

你好 @jaggerwang,为了能够进行高效沟通,我们对 issue 有一定的格式要求,你的 issue 因为不符合要求而被自动关闭。你可以通过 issue 助手 来创建 issue 以方便我们定位错误。谢谢配合!

从没见过哪个开源项目要求这么严格

并不是这样的,实际上整个 issue-helper 的想法都是借鉴 vue 社区的做法。

重现是很花费精力的,我们能力和精力也是有限的,会把有限的资源优先投入到那些提供了更多信息和可重现的反馈上。我们知道很多问题(特别是 webpack 配置)是没办法通过在线 codesandbox 提供的,对于这些情况你可以提供一个最小化的 git repo 仓库方便我们重现。相关的信息和理由 vue 作者尤小右写的很明白了。

image image

难怪 Antd Issue 跟其它同级别的项目比这么少,原来是这原因。

上述项目也提供了严格的 issue helper 和自动关闭功能,可是我们的 issues 处理还是其中最高效的之一,因为一是我们比较勤劳,二是还有很多社区同学的倾情投入,三是好的反馈能让你我的联动更高效。

最后非常感谢 @jaggerwang 的反馈和理解,关于这个 issue 的问题,提供了可重现 git repo 后我会 reopen 和跟进排查。

Since antd components’ styles are independent and not related with style file order. These warning can be ignored or use filter to skip in console. But if want to resolve this, you can ref mini-css-extract-plugin’s advice to keep order of components import like:

import { Button, Table } from 'antd'; // File 1

import { Table, Button } from 'antd'; // File 2

To

import { Button, Table } from 'antd'; // File 1

import { Button, Table } from 'antd'; // File 2

NOTE AGAIN: it is safe to import antd components without same order since their style is independent. Only you don’t want to get warning from mini-css-extract-plugin and order them.

@bluenergy 未解,但能用,所以先放着了。提个 Issue 给 Antd 实在麻烦,其它描述都好说,可非得给一个可运行的实例。代码都是私有的,要整一个演示实例出来,要花很多时间。关键是这个问题跟用法关系不大,主要是配置方面的,并不难重现。难怪 Antd Issue 跟其它同级别的项目比这么少,原来是这原因。

@AmazingTurtle i get it but yeah um if you’re a developer and haven’t ever heard of Google Translate you’re in trouble ha ha. Not everyone speaks English. In fact MOST don’t they speak…wait for it…Chinese (Mandarin).

Screen Shot 2019-09-19 at 2 22 35 AM

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
    }
  }

@jaggerwang @afc163 同样遇到这个问题,使用 create-react-app,创建了一个复现问题的 Demo。这个 Demo 只是 eject 之后,添加了 babel-plugin-import懒加载,以及对 antd 组件的简单使用,git 有详细记录,执行 yarn build,可以看到如下警告: image 我尝试去解决这个问题,找到了三个方案,分别创建了三个分支以方便你查看,调整后执行 yarn build 之后不再出现提示:

  1. manual 分支,直接从 antd 手动引入组件和其对应的样式。
  2. no-lazy 分支,不使用懒加载,或者说不使用 code-splitting
  3. no-css-import 分支,使用 babel-plugin-import 时 按如下配置,样式文件不再连同组件一并按需加载,而是仅仅加载组件,样式则在入口文件中整体引入。虽然这个会导致一些没必要的组件样式的引入,但是考虑到通常项目会用到大部分 antd 的组件,所以这么做并不会导致实际打包后的css体积增加很多。
"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es"
    }
  ]
]

当然这些都是我的临时解决方案,还希望大佬们解释一下原因,并提供更加的解决方案。

I installed webpack-filter-warnings-plugin to hide the errors.

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 
module.exports = {
  // ... rest of webpack config
  plugins: [
    new FilterWarningsPlugin({ 
      exclude: /Conflicting order/,
    })
  ]
}

可惜楼上精心准备的描述了。我也遇到了同样的问题。你怎么解决的?

I’m seeing this same problem in a Gastby project, so it’s not just Create React App.

I agree with @ChuckJonas, please reopen.

@zombieJ,

I don’t think the problem can be solved simply by alphabetizing imports. I’m already doing this (via Prettier/ESLint):

image

And I’m getting literally pages of these warnings.

Because I got the issue conflicted between Menu, Dropdown, Tooltip, So I movedthe Dropdown to outside. It’s working now

From

import { Menu, Dropdown, Button, Icon } from 'antd';

To

import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

Because I got the issue conflicted between Menu, Dropdown, Tooltip, So I movedthe Dropdown to outside. It’s working now

From

import { Menu, Dropdown, Button, Icon } from 'antd';

To

import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';

Thanks! Works for me. You have to import the conflicting components seperately. For me, the below 3 components conflict, so I import them like this:

import { Button } from 'antd';
import Modal from 'antd/lib/modal';
import message from 'antd/lib/message';

Yes, I know it looks ugly and stupid, but it’s the only way to solve the problem.

I am able bypass this error by lazy loading antd components within my application, An example in NextJS would be to load in this manner

const Menu = dynamic(() => import('antd/lib/menu'))
const MenuItem = dynamic(() => import('antd/lib/menu/MenuItem'))

Here I can use the Menu and Menu Item from antd in place or the import {Menu} from 'antd' syntax where MenuItem is Menu.Item

So far no issues with Conflicting order between styles" This applies if you are using less and the babel-import-plugin

hiding the warnings is not a good idea if you want you app to actually look right 100% of the time. The only real workaround I’ve found is importing the entire stylesheet, instead of using the babel plugin.

Is the solution as easy as sorting the imports of all antd components? Can we reopen this please?!

@blujedis I’m using the browser embedded translate feature (right-click -> translate). Because github.com has set it’s language to EN it’s forcing EN as source language, thus not translating chinese. I simply don’t like to copy each post and translate it manually since the translator is not capable of translating multiple languages at once.

@jaggerwang Another reason for this bug is import Component from lib dir.

eg:

import { Button } from 'antd'
import Dropdown from 'antd/lib/dropdown'

...

And your project use babel-plugin-import with less.

Today, we found the case can make mini-css-extract-plugin warning

I’ve run into the same issue when I introduced React.lazy. Unfortunately, I started splitting the code at a high level on a large code base and still have not been able to track down which imports are in the incorrect order.