Ant-design: Kompilierungswarnung: Chunk-Stile [mini-css-extract-plugin] Widersprüchliche Reihenfolge zwischen ...

Hallo @jaggerwang , dein Issue wurde geschlossen, da es nicht unseren Issue-Anforderungen entspricht. Bitte verwende den Issue Helper , um ein

Hallo @jaggerwang, um effizient kommunizieren zu können, haben wir bestimmte Formatvorgaben für die Ausgabe und Ihre Ausgabe wird automatisch geschlossen, da sie nicht den Anforderungen entspricht. Sie können über den Problemassistenten ein Problem erstellen, um uns bei der Fehlersuche zu unterstützen. Danke für Ihre Kooperation!

Müssen Sie einen so hohen Schwellenwert für Issue festlegen? Ich habe noch nie ein Open-Source-Projekt mit so strengen Anforderungen gesehen. Nicht alle Projekte sind einfach online zu demonstrieren, dieser Zusammenstellungs- und Verpackungsfehler ist sehr anschaulich beschrieben und lässt sich leicht reproduzieren.

Schade, dass die Beschreibung im Obergeschoss sorgfältig aufbereitet wurde. Ich bin auch auf das gleiche Problem gestoßen. Wie hast du es gelöst?

@bluenergy ist ungelöst, aber es funktioniert, also setzen wir es an die erste Stelle. Es ist wirklich mühsam, ein Problem gegenüber Antd zu erwähnen, andere Beschreibungen sind leicht zu sagen, aber Sie müssen ein funktionierendes Beispiel geben. Der Code ist privat, und es dauert lange, bis ein vollständiges Demo-Beispiel herauskommt. Der Schlüssel ist, dass dieses Problem wenig mit der Nutzung zu tun hat, sondern hauptsächlich mit der Konfiguration und nicht schwer zu reproduzieren ist. Kein Wunder, dass Antd-Probleme im Vergleich zu anderen Projekten der gleichen Ebene so gering sind, und das ist der Grund.

Ich habe noch nie ein Open-Source-Projekt gesehen, das so strenge Anforderungen stellt

Dies ist nicht der Fall, vielmehr basiert die Idee des gesamten Issue-Helfers auf der Praxis der vue-Community.

• https://new-issue.vuejs.org/
• https://elementui.github.io/issue-generator
• https://www.iviewui.com/new-issue
• https://ecomfe.github.io/echarts-issue-helper

Es braucht viel Energie, um sich zu reproduzieren, und unsere Fähigkeiten und Energie sind auch begrenzt.Wir werden begrenzte Ressourcen denen vorziehen, die mehr Informationen und reproduzierbares Feedback liefern. Wir wissen, dass viele Probleme (insbesondere die Webpack-Konfiguration) nicht über Online-Codesandbox bereitgestellt werden können.Für diese Situationen können Sie ein minimales Git-Repo-Repository bereitstellen, das wir reproduzieren können. Die relevanten Informationen und Gründe sind eindeutig vom Vue-Autor You Xiaoyou verfasst.

Kein Wunder, dass Antd-Probleme im Vergleich zu anderen Projekten der gleichen Ebene so gering sind, und das ist der Grund.

Die oben genannten Projekte bieten auch strikte Problemhilfe- und automatische Schließfunktionen, aber unsere Problembearbeitung ist immer noch eine der effizientesten, weil wir fleißiger sind, die andere ist die Hingabe vieler Community-Studenten und die dritte ist gutes Feedback Es kann Sie und mich effizienter machen.

Abschließend danke @jaggerwang für Ihr Feedback und Ihr Verständnis. In Bezug auf dieses Problem werde ich nach Bereitstellung eines reproduzierbaren Git-

Ich habs! Holen Sie sich einen, wenn Sie Zeit haben.

@jaggerwang @afc163 ist ebenfalls auf dieses Problem gestoßen und hat mit create-react-app eine Demo erstellt, um das Problem Babel-Plugin-Imports und Lazy Loading und einfach zu verwendenden antd-Komponenten, Git detaillierte Aufzeichnungen, Ausführen von yarn build , Sie können die folgende Warnung sehen:

Ich habe versucht, dieses Problem zu lösen und habe drei Lösungen gefunden. Drei Zweige wurden zu Ihrer Bequemlichkeit erstellt. Nach der Anpassung erscheint die Eingabeaufforderung nicht mehr, nachdem yarn build :

1. Manuelle Verzweigung , Komponenten und ihre entsprechenden Stile manuell direkt aus antd importieren.
2. No-lazy branch , verwenden Sie kein Lazy Loading oder verwenden Sie kein Code-Splitting .
3. No-css-import branch , konfigurieren Sie bei Verwendung von babel-plugin-import wie folgt: Die Style-Datei wird nicht mehr zusammen mit der Komponente bei Bedarf geladen, sondern nur die Komponente wird geladen, und der Style wird als Ganzes in die Eintragsdatei. Obwohl dies zur Einführung einiger unnötiger Komponentenstile führen wird, führt dies angesichts der Tatsache, dass die meisten antd-Komponenten normalerweise im Projekt verwendet werden, nicht dazu, dass das tatsächlich gepackte CSS-Volumen stark ansteigt.

"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es"
    }
  ]
]

Das sind natürlich meine Übergangslösungen, und ich hoffe, dass die Großen die Gründe erklären und weitere Lösungen anbieten können.

Ich habe auch dieses Problem, Konflikte verschiedener Stile

Ich bin auch auf dieses Problem gestoßen, bitte helft mir!

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

Ich bin auf das gleiche Problem gestoßen, als ich React.lazy . Leider habe ich begonnen, den Code auf hoher Ebene auf eine große Codebasis zu splitten und konnte immer noch nicht herausfinden, welche Importe in der falschen Reihenfolge sind.

Ich habe das gleiche Problem. Würde mich über etwas Hilfe freuen. Begann dieses Problem beim Hinzufügen von next-antd-aza-less - https://www.npmjs.com/package/next-antd-aza-less .

Nachdem Sie sich den umi-Code angesehen haben , können Sie das Plugin FilterCSSConflictingWarning zu Ihrer Webpack-Konfiguration hinzufügen.

@lonsdale8734 Ich habe dieses Plugin hinzugefügt, wenn die neueste Version immer noch Probleme hat, erstellen Sie bitte ein Repo. Wir werden es uns anschauen.

Da die Stile der antd-Komponenten unabhängig sind und nicht mit der Reihenfolge der Stildateien verbunden sind. Diese Warnungen können ignoriert oder mit Filter in der Konsole übersprungen werden.
Wenn Sie dies jedoch beheben möchten, können Sie den Rat von folgt beizubehalten :

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

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

Zu

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

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

HINWEIS WIEDER:Es ist sicher, antd-Komponenten ohne dieselbe Reihenfolge zu importieren, da ihr Stil unabhängig ist.

@zombieJ
Ist es besser, es in babel-plugin-import zu handhaben?
Die Änderung der Reihenfolge im biz-Projekt ist zu zeitaufwändig.

@jaggerwang
Ein weiterer Grund für diesen Fehler ist import Component from lib dir.

z.B:

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

...

Und Ihr Projekt verbraucht babel-plugin-import mit weniger.

Heute haben wir festgestellt, dass der Fall mini-css-extract-plugin Warnung auslösen kann

Ich verwende customize-cra mit antd und habe das gleiche Problem. Dies ist mein Code, ziemlich einfach, und ich habe diesen Fehler erhalten

const addMyPlugin = config => {
...
};
module.exports = override(
addMyPlugin,
fixBabelImports("importieren", {
Bibliotheksname: "antd",
BibliothekVerzeichnis: "es",
Stil: wahr
}),
addLessLoader({
javascriptEnabled: wahr,
modifizierenVars: {
"@primary-color": "#0A4080"
}
})
);

gibt es dafür eine lösung?

Schön zu sehen, dass die Hälfte der Leute hier auf Chinesisch (oder was auch immer es ist) antwortet. Wenn ich das nächste Mal ein Ticket öffne, wird es auf Italienisch sein.

@AmazingTurtle Ich

@blujedis Ich verwende die im Browser eingebettete Übersetzungsfunktion (Rechtsklick -> Übersetzen). Da github.com seine Sprache auf EN eingestellt hat, erzwingt es EN als Quellsprache und übersetzt somit kein Chinesisch. Ich mag es einfach nicht, jeden Beitrag zu kopieren und manuell zu übersetzen, da der Übersetzer nicht in der Lage ist, mehrere Sprachen gleichzeitig zu übersetzen.

Für diejenigen, die react-app-rewired oder Analoga verwenden und dabei bleiben, disable mini-css-extract-plugin warning Weg zu gehen:

1. Stellen Sie sicher, dass Sie "mini-css-extract-plugin": "^0.8.0" , andernfalls fügen Sie es hinzu (in dieser Version gibt es ein zusätzliches Flag, um Bestellwarnungen zu überspringen)
2. füge diesen ~(schrecklichen Hack)~ zu deinem 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
    }
  }

Da ich das Problem zwischen Menü, Dropdown und Tooltip hatte, habe ich das Dropdown nach außen verschoben. Es funktioniert jetzt

Von

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

Zu

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

Ist die Lösung so einfach wie das Sortieren der Importe aller antd-Komponenten?
Können wir das bitte wieder öffnen?!

@zombieJ deine Lösung funktioniert nicht immer. Ich habe jeden Import in meinem kleinen Projekt so organisiert, dass er konsistent ist, und ich sehe dieses Problem immer noch.

Bitte wieder öffnen...

Ich sehe das gleiche Problem in einem Gastby-Projekt, also ist es nicht nur Create React App.

Ich stimme @ChuckJonas zu , bitte wieder öffnen.

@zombieJ ,

Ich glaube nicht, dass das Problem einfach gelöst werden kann, indem Importe alphabetisch sortiert werden. Ich mache das bereits (über Prettier/ESLint):

Und ich bekomme buchstäblich Seiten dieser Warnungen.

Ich habe webpack-filter-warnings-plugin installiert, um die Fehler auszublenden.

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

module.exports = {
  // ... rest of webpack config
  plugins: [
    new FilterWarningsPlugin({ 
      exclude: /Conflicting order/,
    })
  ]
}

Das Ausblenden der Warnungen ist keine gute Idee, wenn Sie möchten, dass Ihre App zu 100 % richtig aussieht. Die einzige wirkliche Problemumgehung, die ich gefunden habe, besteht darin, das gesamte Stylesheet zu importieren, anstatt das Babel-Plugin zu verwenden.

habe folgendes

hast du die lösung gefunden?

Ich kann diesen Fehler umgehen, indem ich antd-Komponenten in meiner Anwendung träge lade. Ein Beispiel in NextJS wäre, auf diese Weise zu laden

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

Hier kann ich das Menü und den Menüpunkt von antd an Ort und Stelle oder die import {Menu} from 'antd' Syntax verwenden, wobei MenuItem Menu.Item

Bisher keine Probleme mit widersprüchlicher Reihenfolge zwischen Stilen"
Dies gilt, wenn Sie weniger verwenden und das babel-import-plugin

Da ich das Problem zwischen Menü, Dropdown und Tooltip hatte, habe ich das Dropdown nach außen verschoben. Es funktioniert jetzt

Von

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

Zu

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

Dies funktionierte für mich, indem alle Button separat von antd/lib/button importiert wurden, wie:

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

Danke @phattranky

Wenn es mit Antd zu tun hat, dann tun Sie diese 2 Dinge -

• Wenn Sie Stile importieren, indem Sie die Option style von babel-plugin-import angeben, ändern Sie sie von 'css' in true , wodurch die less Version von . importiert wird antd.

• Wenn Sie Stile aus 'antd/dist/antd.css' importieren, ändern Sie sie in antd/dist/antd.less .

Der Teil next.config.js kann von diesem nextjs-css-less-antd überprüft werden

Da ich das Problem zwischen Menü, Dropdown und Tooltip hatte, habe ich das Dropdown nach außen verschoben. Es funktioniert jetzt

Von

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

Zu

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

Vielen Dank! Funktioniert bei mir. Sie müssen die widersprüchlichen Komponenten separat importieren. Für mich stehen die folgenden 3 Komponenten im Konflikt, daher importiere ich sie wie folgt:

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

Ja, ich weiß, es sieht hässlich und dumm aus, aber es ist die einzige Möglichkeit, das Problem zu lösen.

Da ich das Problem zwischen Menü, Dropdown und Tooltip hatte, habe ich das Dropdown nach außen verschoben. Es funktioniert jetzt
Von

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

Zu

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

Vielen Dank! Funktioniert bei mir. Sie müssen die widersprüchlichen Komponenten separat importieren. Für mich stehen die folgenden 3 Komponenten im Konflikt, daher importiere ich sie wie folgt:

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

Ja, ich weiß, es sieht hässlich und dumm aus, aber es ist die einzige Möglichkeit, das Problem zu lösen.

Ja, die Warnung war weg, wenn Modal separat importiert wurde.

import Modal from 'antd/lib/modal/Modal'