Ant-design: 编译警告：块样式 [mini-css-extract-plugin] 之间的顺序冲突...

创建于 2019-02-18  ·  35评论  ·  资料来源: ant-design/ant-design

此警告无法在您的在线环境中重现，因此我直接提交。

问题

我在 Next.js 项目中使用 Ant Design。 我正在使用babel-plugin-import按需加载 antd 组件。 显示第一页是可以的，但是切换到另一个页面时，出现以下警告。

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

而且页面样式不对，刷新后就ok了。

在构建我的项目时，我也收到了以下警告。

➜  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

环境

包.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"
    ]
  ]
}

下一个.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

最有用的评论

很高兴看到这里有一半的人用中文（或其他任何东西）回应。 下次我打开一张票时，它会是意大利语。

picture AmazingTurtle 于 2019-08-26
👍34 😄20 👎9 👀1 😕1

所有35条评论

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 于 2019-02-18
👎9

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

jaggerwang picture jaggerwang 于 2019-02-18
👍31 👎10

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

bluenergy picture bluenergy 于 2019-02-19
👍5

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

jaggerwang picture jaggerwang 于 2019-02-20
👍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 于 2019-02-22
👍10 👎1

Got it！有空时弄一个。

jaggerwang picture jaggerwang 于 2019-02-23

@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 于 2019-03-04
👍8 🎉1

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

wanliyunyan picture wanliyunyan 于 2019-03-22

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

makstr picture makstr 于 2019-03-22

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

ztplz picture ztplz 于 2019-03-22

我在引入React.lazy时遇到了同样的问题。 不幸的是，我开始在大型代码库上从高层次拆分代码，但仍然无法追踪哪些导入的顺序不正确。

bartimaeus picture bartimaeus 于 2019-04-21

我有同样的问题。 很高兴得到一些帮助。 添加next-antd-aza-less - https://www.npmjs.com/package/next-antd-aza-less时开始出现此问题。

danielsimao picture danielsimao 于 2019-04-24

在查看umi 代码后，它将插件FilterCSSConflictingWarning添加到您的 webpack 配置中。

lonsdale8734 picture lonsdale8734 于 2019-05-04

@lonsdale8734我已经添加了这个插件，如果最新版本还有问题，请创建一个repo。 我们会看一看。

ztplz picture ztplz 于 2019-05-04

由于 antd 组件的样式是独立的，与样式文件顺序无关。 这些警告可以忽略或使用过滤器在控制台中跳过。
但是如果想解决这个问题，你可以参考mini-css-extract-plugin 的建议来保持组件导入的顺序，如：

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

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

到

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

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

再次注意：没有相同顺序的 antd 组件是安全的，因为它们的样式是独立的。

zombieJ picture zombieJ 于 2019-05-05
👍11

@zombieJ
在babel-plugin-import处理它更好吗？
在 biz 项目中更改订单太耗时了。

xyy94813 picture xyy94813 于 2019-05-07

@jaggerwang
此错误的另一个原因是从 lib 目录导入组件。

例如：

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

...

而您的项目使用babel-plugin-import更少。

今天，我们发现这个案例可以让mini-css-extract-plugin发出警告

xyy94813 picture xyy94813 于 2019-05-07
👍1

我在 antd 中使用了 custom-cra，遇到了同样的问题，这是我的代码，很简单，但出现了这个错误

const addMyPlugin = config => {
...
};
module.exports = 覆盖（
添加我的插件，
fixBabelImports("导入", {
图书馆名称：“蚂蚁”，
图书馆目录：“es”，
风格：真实
}),
addLessLoader({
javascriptEnabled: 真,
修改变量：{
"@primary-color": "#0A4080"
}
})
);

shiqifeng2000 picture shiqifeng2000 于 2019-06-17

有解决方案吗？

saostad picture saostad 于 2019-07-30

很高兴看到这里有一半的人用中文（或其他任何东西）回应。 下次我打开一张票时，它会是意大利语。

AmazingTurtle picture AmazingTurtle 于 2019-08-26
👍34 😄20 👎9 👀1 😕1

@AmazingTurtle我明白了，但是是的，如果您是开发人员并且从未听说过 Google 翻译，那么您就有麻烦了哈哈。 不是每个人都会说英语。 事实上，大多数人不会说话……等等……中文（普通话）。

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

blujedis picture blujedis 于 2019-09-19
👎8

@blujedis我正在使用浏览器嵌入的翻译功能（右键单击 -> 翻译）。 由于 github.com 已将其语言设置为 EN，因此强制将 EN 作为源语言，因此不会翻译中文。 我只是不喜欢复制每个帖子并手动翻译，因为翻译人员无法同时翻译多种语言。

AmazingTurtle picture AmazingTurtle 于 2019-09-19
😕1

对于那些使用react-app-rewired或类似物并坚持使用disable mini-css-extract-plugin warning方式的人：

  1. 确保您有"mini-css-extract-plugin": "^0.8.0" ，否则添加它（此版本中有一个额外的标志可以跳过订购警告）
  2. 将此~（可怕的黑客）~添加到您的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 于 2019-10-21
👍7 🚀1

因为我在菜单、下拉菜单、工具提示之间遇到了问题，所以我将下拉菜单移到了外面。 它现在工作

从

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

到

import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';
phattranky picture phattranky 于 2019-12-19
👍2

解决方案是否像对所有 antd 组件的导入进行排序一样简单？
我们可以重新打开这个吗？！

ChuckJonas picture ChuckJonas 于 2020-02-21
👍1

@zombieJ您的解决方案并不总是有效。 我已经组织了我的小项目中的每个导入以保持一致，但我仍然看到这个问题。

请重新打开...

ChuckJonas picture ChuckJonas 于 2020-02-26

我在 Gastby 项目中看到了同样的问题，所以它不仅仅是 Create React App。

我同意@ChuckJonas ，请重新打开。

@zombieJ ，

我认为这个问题不能简单地通过按字母顺序排列导入来解决。 我已经在这样做了（通过 Prettier/ESLint）：

image

而我得到的字面这些警告的页面。

devuxer picture devuxer 于 2020-05-14
👍5

我安装了webpack-filter-warnings-plugin来隐藏错误。

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

module.exports = {
  // ... rest of webpack config
  plugins: [
    new FilterWarningsPlugin({ 
      exclude: /Conflicting order/,
    })
  ]
}
toqitahamid picture toqitahamid 于 2020-05-30
❤1 🎉1 👎1 👍1

如果您希望您的应用程序在 100% 的时间里看起来都是正确的，那么隐藏警告并不是一个好主意。 我发现的唯一真正的解决方法是导入整个样式表，而不是使用 babel 插件。

ChuckJonas picture ChuckJonas 于 2020-06-02
👍1

得到以下

你找到解决办法了吗？

510846 picture 510846 于 2020-06-10

我可以通过在我的应用程序中延迟加载 antd 组件来绕过这个错误，NextJS 中的一个例子就是以这种方式加载

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

在这里，我可以使用来自 antd 的 Menu 和 Menu Item 或import {Menu} from 'antd'语法，其中MenuItem是Menu.Item

到目前为止，样式之间的顺序冲突没有问题”
如果您使用的是 less 和 babel-import-plugin，这适用

koolamusic picture koolamusic 于 2020-06-10
👍1

因为我在菜单、下拉菜单、工具提示之间遇到了问题，所以我将下拉菜单移到了外面。 它现在工作

从

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

到

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

通过将所有Button与antd/lib/button分开导入，这对我有用，例如：

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

谢谢@phatranky

Mehran91z picture Mehran91z 于 2020-06-10

如果与 Antd 相关，那么做这两件事——

  • 如果您通过指定 babel-plugin-import 的style选项导入样式，请将其从'css'更改true ，这将导入less版本的蚂蚁。

  • 如果您从'antd/dist/antd.css'导入样式，请将其更改为antd/dist/antd.less 。

可以从这个nextjs-css-less-antd检查next.config.js部分

GermaVinsmoke picture GermaVinsmoke 于 2020-06-18

因为我在菜单、下拉菜单、工具提示之间遇到了问题，所以我将下拉菜单移到了外面。 它现在工作

从

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

到

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

谢谢！ 为我工作。 您必须单独导入冲突的组件。 对我来说，以下 3 个组件冲突，所以我像这样导入它们：

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

是的，我知道它看起来丑陋和愚蠢，但这是解决问题的唯一方法。

fengerzh picture fengerzh 于 2020-10-22
👍1

因为我在菜单、下拉菜单、工具提示之间遇到了问题，所以我将下拉菜单移到了外面。 它现在工作
从

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

到

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

谢谢！ 为我工作。 您必须单独导入冲突的组件。 对我来说，以下 3 个组件冲突，所以我像这样导入它们：

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

是的，我知道它看起来丑陋和愚蠢，但这是解决问题的唯一方法。

是的，单独导入 Modal 时警告消失了。

import Modal from 'antd/lib/modal/Modal'
macshion picture macshion 于 2020-11-03
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

zhangchen2397 picture zhangchen2397  ·  3评论
kevyu picture kevyu  ·  3评论
lifeneedspassion picture lifeneedspassion  ·  3评论
alanwei0 picture alanwei0  ·  3评论
xtznhzxdev picture xtznhzxdev  ·  3评论