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

Created on 18 Feb 2019  ·  35Comments  ·  Source: ant-design/ant-design

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.

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

> [email protected] 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')
    ),
  },
})))
picture jaggerwang
👍1

Most helpful comment

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.

picture AmazingTurtle on 26 Aug 2019
👍34 😄20 👎9 👀1 😕1

All 35 comments

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 以方便我们定位错误。谢谢配合！

ant-design-bot picture ant-design-bot on 18 Feb 2019
👎9

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

jaggerwang picture jaggerwang on 18 Feb 2019
👍31 👎10

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

bluenergy picture bluenergy on 19 Feb 2019
👍5

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

jaggerwang picture jaggerwang on 20 Feb 2019
👍8 👎2

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

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

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

image

image

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

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

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

afc163 picture afc163 on 22 Feb 2019
👍10 👎1

Got it！有空时弄一个。

jaggerwang picture jaggerwang on 23 Feb 2019

@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"
    }
  ]
]

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

HaoChuan9421 picture HaoChuan9421 on 4 Mar 2019
👍8 🎉1

我也有这个问题，样式各种的冲突

wanliyunyan picture wanliyunyan on 22 Mar 2019

我也遇到了这个问题，请帮忙！

makstr picture makstr on 22 Mar 2019

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-415345126

ztplz picture ztplz on 22 Mar 2019

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.

bartimaeus picture bartimaeus on 21 Apr 2019

I'm having the same issue. Would gladly appreciate some help. Started having this issue when added next-antd-aza-less - https://www.npmjs.com/package/next-antd-aza-less.

danielsimao picture danielsimao on 24 Apr 2019

After looking into the umi code, it will work to add plugin FilterCSSConflictingWarning to your webpack config.

lonsdale8734 picture lonsdale8734 on 4 May 2019

@lonsdale8734 I have added this plugin, if the latest version still has problems, please create a repo. We will take a look at it.

ztplz picture ztplz on 4 May 2019

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.

zombieJ picture zombieJ on 5 May 2019
👍11

@zombieJ
Is it better to handle it in babel-plugin-import?
Change the order in biz project is too time consuming.

xyy94813 picture xyy94813 on 7 May 2019

@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

xyy94813 picture xyy94813 on 7 May 2019
👍1

I am using customize-cra with antd, and got the same issue, this is my code, pretty simple, and I got this error

const addMyPlugin = config => {
...
};
module.exports = override(
addMyPlugin,
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: true
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
"@primary-color": "#0A4080"
}
})
);

shiqifeng2000 picture shiqifeng2000 on 17 Jun 2019

is there a solution for that?

saostad picture saostad on 30 Jul 2019

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.

AmazingTurtle picture AmazingTurtle on 26 Aug 2019
👍34 😄20 👎9 👀1 😕1

@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

blujedis picture blujedis on 19 Sep 2019
👎8

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

AmazingTurtle picture AmazingTurtle on 19 Sep 2019
😕1

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
    }
  }
illyaMs picture illyaMs on 21 Oct 2019
👍7 🚀1

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';
phattranky picture phattranky on 19 Dec 2019
👍2

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

ChuckJonas picture ChuckJonas on 21 Feb 2020
👍1

@zombieJ your solution does not always work. I've organized every import in my small project to be consistent and I still see this issue.

Please reopen...

ChuckJonas picture ChuckJonas on 26 Feb 2020

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.

devuxer picture devuxer on 14 May 2020
👍5

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/,
    })
  ]
}
toqitahamid picture toqitahamid on 30 May 2020
❤1 🎉1 👎1 👍1

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.

ChuckJonas picture ChuckJonas on 2 Jun 2020
👍1

got the following

do you found the solution?

510846 picture 510846 on 10 Jun 2020

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

koolamusic picture koolamusic on 10 Jun 2020
👍1

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';

This was working for me by importing all Button separately from antd/lib/button like:

import { Form, Input, Row, Col } from 'antd'
import Button from 'antd/lib/button'

Thank you @phattranky

Mehran91z picture Mehran91z on 10 Jun 2020

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.

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

GermaVinsmoke picture GermaVinsmoke on 18 Jun 2020

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.

fengerzh picture fengerzh on 22 Oct 2020
👍1

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.

Yes, the warning was gone when importing Modal separately.

import Modal from 'antd/lib/modal/Modal'
macshion picture macshion on 3 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

AhmedSayed77 picture AhmedSayed77  ·  3Comments
yangbin1994 picture yangbin1994  ·  3Comments
shivekkhurana picture shivekkhurana  ·  3Comments
lifeneedspassion picture lifeneedspassion  ·  3Comments
taikongfeizhu picture taikongfeizhu  ·  3Comments