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')
    ),
  },
})))

[AmazingTurtle]

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.

[jaggerwang]

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