Ant-design: Aviso de compilação: estilos de partes [mini-css-extract-plugin] Ordem conflitante entre ...

Olá @jaggerwang , seu problema foi encerrado porque não está em conformidade com nossos requisitos. Use o Auxiliar de problema para criar um problema, obrigado!

Olá @jaggerwang, para podermos nos comunicar com eficiência, temos certos requisitos de formato para o problema, e seu problema é encerrado automaticamente porque não atende aos requisitos. Você pode criar um problema por meio do assistente de problemas para nos ajudar a localizar erros. Obrigado pela sua cooperação!

Você precisa definir um limite tão alto para o problema? Nunca vi um projeto de código aberto com requisitos tão rígidos. Nem todos os projetos são fáceis de demonstrar online. Este erro de compilação e empacotamento foi descrito de forma muito clara e pode ser facilmente reproduzido.

É uma pena que a descrição lá em cima preparada com cuidado. Eu também encontrei o mesmo problema. Como você resolveu isso?

@bluenergy não

Nunca vi um projeto de código aberto com requisitos tão rígidos

Esse não é o caso.De fato, a ideia de todo o ajudante de questões é baseada na prática da comunidade vue.

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

É preciso muita energia para se reproduzir e nossa capacidade e energia também são limitadas. Vamos priorizar os recursos limitados para aqueles que fornecem mais informações e feedback reproduzível. Sabemos que muitos problemas (especialmente a configuração do webpack) não podem ser fornecidos por meio do codesandbox.Para essas situações, você pode fornecer um repositório git repo mínimo para reproduzirmos. As informações e razões relevantes são claramente escritas pelo vue autor You Xiaoyou.

Não é à toa que os problemas do Antd são tão poucos em comparação com outros projetos do mesmo nível.

Os projetos acima também fornecem funções rígidas de auxiliar de problemas e fechamento automático, mas nosso processamento de problemas ainda é um dos mais eficientes, porque um é que somos mais trabalhadores, o outro é que há devoção de muitos alunos da comunidade, e o terceiro é um bom feedback. Isso pode tornar você e eu mais eficientes.

Por fim, obrigado @jaggerwang por seu feedback e compreensão. Com relação a esse problema, irei reabrir e fazer o acompanhamento após fornecer um repositório git reproduzível.

Entendi! Compre um quando tiver tempo.

@jaggerwang @ afc163 também encontrou esse problema, usando create-react-app para criar uma demonstração para reproduzir o problema. Esta demonstração somente após ejetar, adicionar um babel-plugin-import e lazy loading , e simples de usar componentes antd, git Detailed records, execute yarn build , você pode ver o seguinte aviso:

Tentei resolver este problema e encontrei três soluções. Três branches foram criados para sua conveniência. Após o ajuste, o prompt não aparece mais após a execução de yarn build :

1. Ramificação manual, importe manualmente os componentes e seus estilos correspondentes diretamente do antd.
2. Ramificação não divisão de código .
3. No-css-import branch , ao usar babel-plugin-import, configure da seguinte forma: O arquivo de estilo não é mais carregado junto com o componente sob demanda, mas apenas o componente é carregado, e o estilo é importado como um todo no arquivo de entrada. Embora isso leve à introdução de alguns estilos de componentes desnecessários, considerando que a maioria dos componentes antd são normalmente usados ​​no projeto, isso não fará com que o volume real do css empacotado aumente muito.

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

Claro, essas são minhas soluções temporárias e espero que os grandes possam explicar os motivos e fornecer mais soluções.

Eu também tenho esse problema, conflitos de vários estilos

Eu também encontrei esse problema, por favor me ajude!

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

Encontrei o mesmo problema quando apresentei React.lazy . Infelizmente, comecei a dividir o código em um alto nível em uma grande base de código e ainda não consegui rastrear quais importações estão na ordem incorreta.

Estou tendo o mesmo problema. Ficaria feliz em receber alguma ajuda. Começou a ter esse problema quando adicionado next-antd-aza-less - https://www.npmjs.com/package/next-antd-aza-less .

Depois de examinar o código umi , ele funcionará para adicionar o plugin FilterCSSConflictingWarning à configuração do seu webpack.

@ lonsdale8734 Adicionei este plugin, se a versão mais recente ainda apresentar problemas, crie um repositório. Vamos dar uma olhada nisso.

Uma vez que os estilos dos componentes antd são independentes e não estão relacionados com a ordem do arquivo de estilo. Esses avisos podem ser ignorados ou usar um filtro para pular no console.
Mas se quiser resolver isso, você pode consultar o conselho do mini-css-extract-plugin para manter a ordem de importação de componentes como:

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

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

Para

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

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

NOTA NOVAMENTE:é seguro importar componentes antd sem a mesma ordem, pois seu estilo é independente.

@zombieJ
É melhor lidar com isso em babel-plugin-import ?
Alterar o pedido no projeto de negócios é muito demorado.

@jaggerwang
Outra razão para esse bug é importar o componente do lib dir.

por exemplo:

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

...

E seu projeto usa babel-plugin-import com menos.

Hoje, descobrimos que o caso pode fazer mini-css-extract-plugin aviso

Estou usando o customize-cra com o antd, e tenho o mesmo problema, este é o meu código, bem simples, e recebi este erro

const addMyPlugin = config => {
...
};
module.exports = override (
addMyPlugin,
fixBabelImports ("import", {
nome da biblioteca: "antd",
libraryDirectory: "es",
estilo: verdadeiro
}),
addLessLoader ({
javascriptEnabled: true,
modificarVars: {
"@ cor primária": "# 0A4080"
}
})
);

existe uma solução para isso?

É bom ver que metade das pessoas aqui está respondendo em chinês (ou o que quer que seja). Da próxima vez que abrir um ingresso, será em italiano.

@AmazingTurtle entendi, mas sim, se você é um desenvolvedor e nunca ouviu falar do Google Translate, você está com problemas, ha ha. Nem todo mundo fala inglês. Na verdade, a MAIORIA deles não fala ... espere ... Chinês (Mandarim).

@blujedis Estou usando o recurso de tradução embutido no navegador (clique com o botão direito -> traduzir). Como github.com definiu seu idioma como EN, ele está forçando o EN como idioma de origem, portanto, não traduz o chinês. Eu simplesmente não gosto de copiar cada postagem e traduzi-la manualmente, pois o tradutor não é capaz de traduzir vários idiomas ao mesmo tempo.

Para aqueles que usam react-app-rewired ou análogos e paus para ir disable mini-css-extract-plugin warning caminho:

1. certifique-se de ter "mini-css-extract-plugin": "^0.8.0" , caso contrário, adicione-o (há um sinalizador extra nesta versão para pular os avisos de pedido)
2. adicione este ~ (hack horrível) ~ ao seu 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
    }
  }

Porque eu tenho o problema de conflito entre Menu, Lista suspensa, Dica de ferramenta, então mudei a lista suspensa para fora. Está funcionando agora

A partir de

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

Para

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

A solução é tão fácil quanto classificar as importações de todos os componentes do Antd?
Podemos reabrir isso, por favor ?!

@zombieJ sua solução nem sempre funciona. Organizei cada importação em meu pequeno projeto para ser consistente e ainda vejo esse problema.

Por favor, reabra ...

Estou vendo o mesmo problema em um projeto Gastby, então não é apenas Criar aplicativo React.

Eu concordo com @ChuckJonas , reabra.

@zombieJ ,

Não acho que o problema possa ser resolvido simplesmente colocando as importações em ordem alfabética. Já estou fazendo isso (via Prettier / ESLint):

E estou recebendo literalmente páginas desses avisos.

Eu instalei webpack-filter-warnings-plugin para esconder os erros.

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

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

ocultar os avisos não é uma boa ideia se você quiser que o aplicativo tenha uma aparência correta 100% do tempo. A única solução real que encontrei é importar a folha de estilo inteira, em vez de usar o plugin babel.

tenho o seguinte

você achou a solução?

Sou capaz de contornar esse erro carregando lentamente os componentes antd em meu aplicativo. Um exemplo em NextJS seria carregar desta maneira

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

Aqui eu posso usar o Menu e o Item de Menu da Antd no lugar ou a sintaxe import {Menu} from 'antd' onde MenuItem é Menu.Item

Até agora, nenhum problema com a ordem conflitante entre os estilos "
Isto se aplica se você estiver usando less e o plugin babel-import

Porque eu tenho o problema de conflito entre Menu, Lista suspensa, Dica de ferramenta, então mudei a lista suspensa para fora. Está funcionando agora

A partir de

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

Para

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

Isso estava funcionando para mim, importando todos os Button separadamente de antd/lib/button como:

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

Obrigado @phattranky

Se estiver relacionado ao Antd, faça estas 2 coisas -

• Se você importar estilos especificando a opção style de babel-plugin-import, mude de 'css' para true , que importará a versão less de antd.

• Se você importar estilos de 'antd/dist/antd.css' , altere-o para antd/dist/antd.less .

A parte next.config.js pode ser verificada neste nextjs-css-less-antd

Porque eu tenho o problema de conflito entre Menu, Lista suspensa, Dica de ferramenta, então mudei a lista suspensa para fora. Está funcionando agora

A partir de

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

Para

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

Obrigado! Funciona para mim. Você deve importar os componentes conflitantes separadamente. Para mim, os três componentes abaixo entram em conflito, então eu os importo assim:

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

Sim, eu sei que parece feio e estúpido, mas é a única maneira de resolver o problema.

Porque eu tenho o problema de conflito entre Menu, Lista suspensa, Dica de ferramenta, então mudei a lista suspensa para fora. Está funcionando agora
A partir de

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

Para

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

Obrigado! Funciona para mim. Você deve importar os componentes conflitantes separadamente. Para mim, os três componentes abaixo entram em conflito, então eu os importo assim:

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

Sim, eu sei que parece feio e estúpido, mas é a única maneira de resolver o problema.

Sim, o aviso desapareceu ao importar o Modal separadamente.

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