Ant-design: تحذير التجميع: أنماط القطع [mini-css-extract-plugin] ترتيب متعارض بين ...

تم إنشاؤها على ١٨ فبراير ٢٠١٩  ·  35تعليقات  ·  مصدر: ant-design/ant-design

لا يمكن إعادة إنتاج هذا التحذير في محيطك عبر الإنترنت ، لذلك أرسله مباشرة.

مشكلة

أنا أستخدم Ant Design في مشروع Next.js. أنا أستخدم 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

ونمط الصفحة غير صحيح ، فقد أصبح جيدًا بعد التحديث.

تلقيت أيضًا التحذيرات التالية عند إنشاء مشروعي.

➜  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

التعليق الأكثر فائدة

من الجميل أن نرى أن نصف الناس هنا يستجيبون باللغة الصينية (أو أيا كان). في المرة القادمة التي أفتح فيها تذكرة ، ستكون باللغة الإيطالية.

picture AmazingTurtle في ٢٦ أغسطس ٢٠١٩
👍34 😄20 👎9 👀1 😕1

ال 35 كومينتر

مرحبًا jaggerwang ، لقد تم إغلاق مشكلتك لأنها لا تتوافق مع متطلبات الإصدار لدينا. يُرجى استخدام " مساعد المشكلات" لإنشاء مشكلة ، شكرًا لك!

مرحبًاjaggerwang ، حتى نتمكن من التواصل بكفاءة ، لدينا متطلبات تنسيق معينة لهذه المشكلة ، ويتم إغلاق مشكلتك تلقائيًا لأنها لا تفي بالمتطلبات. يمكنك إنشاء مشكلة من خلال مساعد المشكلات لمساعدتنا في تحديد الأخطاء. شكرا لتعاونكم!

ant-design-bot picture ant-design-bot في ١٨ فبراير ٢٠١٩
👎9

هل تحتاج إلى تعيين مثل هذا الحد الأعلى للإصدار؟ لم أر مطلقًا مشروعًا مفتوح المصدر بمثل هذه المتطلبات الصارمة. ليس من السهل عرض جميع المشاريع على الإنترنت ، فقد تم وصف خطأ التجميع والتعبئة هذا بوضوح شديد ويمكن استنساخه بسهولة.

jaggerwang picture jaggerwang في ١٨ فبراير ٢٠١٩
👍31 👎10

إنه لأمر مؤسف أن الوصف الذي تم إعداده بعناية في الطابق العلوي. أنا أيضا واجهت نفس المشكلة. ظمىمئءنؤى؟

bluenergy picture bluenergy في ١٩ فبراير ٢٠١٩
👍5

bluenergy لم

jaggerwang picture jaggerwang في ٢٠ فبراير ٢٠١٩
👍8 👎2

لم أر مطلقًا مشروعًا مفتوح المصدر به مثل هذه المتطلبات الصارمة

ليس هذا هو الحال ، في الواقع ، تستند فكرة مساعد القضية بأكمله على ممارسة مجتمع vue.

يتطلب الأمر قدرًا كبيرًا من الطاقة للتكاثر ، كما أن قدرتنا وطاقتنا محدودة أيضًا. وسوف نعطي الأولوية للموارد المحدودة لتلك التي توفر المزيد من المعلومات والتعليقات القابلة للتكرار. نحن نعلم أن العديد من المشكلات (خاصة تكوين حزمة الويب) لا يمكن توفيرها من خلال codeandbox عبر الإنترنت. بالنسبة لهذه المواقف ، يمكنك توفير الحد الأدنى من مستودع git repos لنا لإعادة إنتاجه. المعلومات والأسباب ذات الصلة مكتوبة بوضوح من قبل مؤلف vue You Xiaoyou.

image

image

لا عجب أن قضايا Antd قليلة جدًا مقارنة بمشاريع أخرى من نفس المستوى ، وهذا هو السبب.

توفر المشاريع المذكورة أعلاه أيضًا مساعدًا صارمًا للقضية ووظائف الإغلاق التلقائي ، لكن معالجة مشكلاتنا لا تزال واحدة من أكثرها كفاءة ، لأن أحدهما هو أننا أكثر اجتهادًا ، والآخر هو أن هناك العديد من طلاب المجتمع تفانيهم ، والثالث هو ردود فعل جيدة. يمكن أن تجعلني أكثر كفاءة.

أخيرًا ، شكرًا لك jaggerwang على ملاحظاتك سأعيد فتحها ومتابعتها بعد تقديم git repo قابل للتكرار.

afc163 picture afc163 في ٢٢ فبراير ٢٠١٩
👍10 👎1

فهمتك! احصل على واحدة عندما يكون لديك الوقت.

jaggerwang picture jaggerwang في ٢٣ فبراير ٢٠١٩

واجهjaggerwang @ afc163 أيضًا هذه المشكلة ، باستخدام create-react-app لإنشاء عرض توضيحي لإعادة إنتاج المشكلة. هذا العرض التوضيحي فقط بعد الإخراج ، أضف برنامج babel-plugin-import والتحميل البطيء ، وبسيط لاستخدام مكونات antd ، وسجلات مفصلة ، وتنفيذ yarn build ، يمكنك مشاهدة التحذير التالي:
image
لقد حاولت حل هذه المشكلة ووجدت ثلاثة حلول. تم إنشاء ثلاثة فروع لراحتك. بعد التعديل ، لن تظهر المطالبة بعد تنفيذ yarn build :

  1. الفرع اليدوي ، استيراد المكونات يدويًا والأنماط المقابلة لها مباشرة من antd.
  2. فرع غير كسول ، لا تستخدم التحميل البطيء ، أو لا تستخدم تقسيم الكود .
  3. فرع No-css-import ، عند استخدام babel-plugin-import ، قم بالتكوين على النحو التالي. لم يعد يتم تحميل ملف النمط مع المكون عند الطلب ، ولكن يتم تحميل المكون فقط ، ويتم استيراد النمط ككل في ملف الدخول. على الرغم من أن هذا سيؤدي إلى إدخال بعض أنماط المكونات غير الضرورية ، مع الأخذ في الاعتبار أن معظم مكونات antd تُستخدم عادةً في المشروع ، فإن القيام بذلك لن يتسبب في زيادة حجم css الفعلي المعبأ بشكل كبير.
"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es"
    }
  ]
]

بالطبع ، هذه هي الحلول المؤقتة ، وآمل أن يتمكن الكبار من شرح الأسباب وتقديم المزيد من الحلول.

HaoChuan9421 picture HaoChuan9421 في ٤ مارس ٢٠١٩
👍8 🎉1

لدي أيضًا هذه المشكلة ، صراعات من أنماط مختلفة

wanliyunyan picture wanliyunyan في ٢٢ مارس ٢٠١٩

أنا أيضا واجهت هذه المشكلة ، الرجاء المساعدة!

makstr picture makstr في ٢٢ مارس ٢٠١٩

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

ztplz picture ztplz في ٢٢ مارس ٢٠١٩

لقد واجهت نفس المشكلة عندما قدمت React.lazy . لسوء الحظ ، بدأت في تقسيم الكود على مستوى عالٍ على قاعدة رمز كبيرة وما زلت غير قادر على تعقب الواردات التي كانت بالترتيب غير الصحيح.

bartimaeus picture bartimaeus في ٢١ أبريل ٢٠١٩

لدي نفس المشكلة. سوف نقدر بكل سرور بعض المساعدة. بدأت في مواجهة هذه المشكلة عند إضافة https://www.npmjs.com/package/next-antd-aza-less .

danielsimao picture danielsimao في ٢٤ أبريل ٢٠١٩

بعد النظر في كود umi ، ستعمل على إضافة البرنامج المساعد FilterCSSConflictingWarning إلى webpack config.

lonsdale8734 picture lonsdale8734 في ٤ مايو ٢٠١٩

@ lonsdale8734 لقد أضفت هذا المكون الإضافي ، إذا كان الإصدار الأخير لا يزال به مشاكل ، فالرجاء إنشاء الريبو. سوف نلقي نظرة عليه.

ztplz picture ztplz في ٤ مايو ٢٠١٩

نظرًا لأن أنماط مكونات 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 في ٥ مايو ٢٠١٩
👍11

تضمين التغريدة
هل من الأفضل التعامل معها بـ babel-plugin-import ؟
تغيير الترتيب في مشروع biz يستغرق وقتًا طويلاً.

xyy94813 picture xyy94813 في ٧ مايو ٢٠١٩

تضمين التغريدة
سبب آخر لهذا الخطأ هو استيراد مكون من lib dir.

على سبيل المثال:

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

...

ويستخدم مشروعك babel-plugin-import بأقل من.

اليوم ، وجدنا أن القضية يمكن أن تجعل تحذير mini-css-extract-plugin

xyy94813 picture xyy94813 في ٧ مايو ٢٠١٩
👍1

أنا أستخدم custom-cra مع antd ، ولدي نفس المشكلة ، هذا هو الكود الخاص بي ، بسيط جدًا ، وقد تلقيت هذا الخطأ

const addMyPlugin = config => {
...
} ؛
module.exports = override (
addMyPlugin ،
fixBabelImports ("استيراد"، {
اسم المكتبة: "antd" ،
LibraryDirectory: "es"،
النمط: صحيح
}) ،
addLessLoader ({
javascriptEnabled: صحيح ،
تعديل الفارس: {
"@ Primary-color": "# 0A4080"
}
})
) ؛

shiqifeng2000 picture shiqifeng2000 في ١٧ يونيو ٢٠١٩

هل هناك حل لهذا؟

saostad picture saostad في ٣٠ يوليو ٢٠١٩

من الجميل أن نرى أن نصف الناس هنا يستجيبون باللغة الصينية (أو أيا كان). في المرة القادمة التي أفتح فيها تذكرة ، ستكون باللغة الإيطالية.

AmazingTurtle picture AmazingTurtle في ٢٦ أغسطس ٢٠١٩
👍34 😄20 👎9 👀1 😕1

AmazingTurtle لقد فهمت ذلك ولكن نعم إذا كنت مطورًا ولم تسمع من قبل عن Google Translate فأنت في مشكلة ها ها ها. لا يتحدث الجميع الإنجليزية. في الحقيقة معظمهم لا يتحدثون ... انتظروا ... الصينية (الماندرين).

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

blujedis picture blujedis في ١٩ سبتمبر ٢٠١٩
👎8

blujedis أنا أستخدم ميزة الترجمة المضمنة في المتصفح (انقر بزر الماوس الأيمن -> ترجمة). نظرًا لأن github.com قد ضبط لغته على EN ، فإنه يجبر اللغة الإنجليزية كلغة مصدر ، وبالتالي لا يترجم الصينية. أنا ببساطة لا أحب نسخ كل منشور وترجمته يدويًا لأن المترجم غير قادر على ترجمة لغات متعددة في وقت واحد.

AmazingTurtle picture AmazingTurtle في ١٩ سبتمبر ٢٠١٩
😕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 في ٢١ أكتوبر ٢٠١٩
👍7 🚀1

لأنني حصلت على تعارض بين المشكلة القائمة ، المنسدلة ، تلميح الأدوات ، لذلك قمت بنقل القائمة المنسدلة إلى الخارج. انه يعمل الان

من عند

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

إلى

import { Menu, Button, Icon } from 'antd';
import Dropdown from 'antd/lib/dropdown';
phattranky picture phattranky في ١٩ ديسمبر ٢٠١٩
👍2

هل الحل سهلاً مثل فرز الواردات لجميع مكونات antd؟
هل يمكننا إعادة فتح هذا من فضلك ؟!

ChuckJonas picture ChuckJonas في ٢١ فبراير ٢٠٢٠
👍1

zombieJ الحل الخاص بك لا يعمل دائمًا. لقد نظمت كل عملية استيراد في مشروعي الصغير لتكون متسقة وما زلت أرى هذه المشكلة.

الرجاء إعادة الفتح ...

ChuckJonas picture ChuckJonas في ٢٦ فبراير ٢٠٢٠

أرى نفس المشكلة في مشروع Gastby ، لذا فهي ليست مجرد إنشاء تطبيق React.

أتفق مع ChuckJonas ، يرجى إعادة

zombieJ ،

لا أعتقد أنه يمكن حل المشكلة ببساطة عن طريق ترتيب الواردات أبجديًا. أنا أفعل هذا بالفعل (عبر Prettier / ESLint):

image

وأنا أتلقى حرفيًا صفحات من هذه التحذيرات.

devuxer picture devuxer في ١٤ مايو ٢٠٢٠
👍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 في ٣٠ مايو ٢٠٢٠
❤1 🎉1 👎1 👍1

لا يعد إخفاء التحذيرات فكرة جيدة إذا كنت تريد أن يظهر التطبيق بشكل صحيح بنسبة 100٪ من الوقت. الحل الحقيقي الوحيد الذي وجدته هو استيراد ورقة الأنماط بأكملها ، بدلاً من استخدام المكون الإضافي babel.

ChuckJonas picture ChuckJonas في ٢ يونيو ٢٠٢٠
👍1

حصلت على ما يلي

هل وجدت الحل

510846 picture 510846 في ١٠ يونيو ٢٠٢٠

أنا قادر على تجاوز هذا الخطأ عن طريق التحميل البطيء لمكونات antd داخل تطبيقي ، على سبيل المثال في NextJS سيكون التحميل بهذه الطريقة

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

هنا يمكنني استخدام القائمة وعنصر القائمة من antd في المكان أو بناء الجملة import {Menu} from 'antd' حيث MenuItem هو Menu.Item

حتى الآن لا توجد مشكلات تتعلق بالترتيب المتعارض بين الأنماط "
هذا ينطبق إذا كنت تستخدم أقل و babel-import-plugin

koolamusic picture koolamusic في ١٠ يونيو ٢٠٢٠
👍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'

شكرا لك phattranky

Mehran91z picture Mehran91z في ١٠ يونيو ٢٠٢٠

إذا كان مرتبطًا بـ Antd ، فافعل هذين الأمرين -

  • إذا قمت باستيراد الأنماط عن طريق تحديد الخيار style لاستيراد المكون الإضافي babel ، فقم بتغييره من 'css' إلى true ، والذي سيستورد الإصدار less من أنتد.

  • إذا قمت باستيراد أنماط من 'antd/dist/antd.css' ، فقم بتغييرها إلى antd/dist/antd.less .

يمكن التحقق من الجزء next.config.js من هذا nextjs-css-less-antd

GermaVinsmoke picture GermaVinsmoke في ١٨ يونيو ٢٠٢٠

لأنني حصلت على تعارض بين المشكلة القائمة ، المنسدلة ، تلميح الأدوات ، لذلك قمت بنقل القائمة المنسدلة إلى الخارج. انه يعمل الان

من عند

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

إلى

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

شكرا! يعمل لدي. يجب عليك استيراد المكونات المتعارضة بشكل منفصل. بالنسبة لي ، تتعارض المكونات الثلاثة التالية ، لذلك أقوم باستيرادها على النحو التالي:

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

نعم ، أعلم أنها تبدو قبيحة وغبية ، لكنها الطريقة الوحيدة لحل المشكلة.

fengerzh picture fengerzh في ٢٢ أكتوبر ٢٠٢٠
👍1

لأنني حصلت على تعارض بين المشكلة القائمة ، المنسدلة ، تلميح الأدوات ، لذلك قمت بنقل القائمة المنسدلة إلى الخارج. انه يعمل الان
من عند

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

إلى

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

شكرا! يعمل لدي. يجب عليك استيراد المكونات المتعارضة بشكل منفصل. بالنسبة لي ، تتعارض المكونات الثلاثة التالية ، لذلك أقوم باستيرادها على النحو التالي:

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 في ٣ نوفمبر ٢٠٢٠
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

longzb picture longzb  ·  3تعليقات
yangbin1994 picture yangbin1994  ·  3تعليقات
kevyu picture kevyu  ·  3تعليقات
zhangchen2397 picture zhangchen2397  ·  3تعليقات
lifeneedspassion picture lifeneedspassion  ·  3تعليقات