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)
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 作者尤小右写的很明白了。
上述项目也提供了严格的 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:
To
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).
For those who uses
react-app-rewired
or analogues and sticks to godisable mini-css-extract-plugin warning
way:"mini-css-extract-plugin": "^0.8.0"
, otherwise add it (there’s an extra flag in this version to skip ordering warnings)config-overrides.js
:@jaggerwang @afc163 同样遇到这个问题,使用
create-react-app
,创建了一个复现问题的 Demo。这个 Demo 只是 eject 之后,添加了 babel-plugin-import 和 懒加载,以及对 antd 组件的简单使用,git 有详细记录,执行yarn build
,可以看到如下警告: 我尝试去解决这个问题,找到了三个方案,分别创建了三个分支以方便你查看,调整后执行yarn build
之后不再出现提示:当然这些都是我的临时解决方案,还希望大佬们解释一下原因,并提供更加的解决方案。
I installed webpack-filter-warnings-plugin to hide the errors.
可惜楼上精心准备的描述了。我也遇到了同样的问题。你怎么解决的?
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):
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
To
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:
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
Here I can use the Menu and Menu Item from antd in place or the
import {Menu} from 'antd'
syntax whereMenuItem
isMenu.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:
And your project use
babel-plugin-import
with less.Today, we found the case can make
mini-css-extract-plugin
warningI’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.