Webpack: “existem vários módulos com nomes que diferem apenas na caixa”, mas os módulos referenciados são idênticos

Estou usando o webpack 3.8.1 e estou recebendo várias instâncias do seguinte aviso de compilação:

WARNING in ./src/Components/NavBar/MainMenuItemMobile.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/MainMenuItemMobile.js
    Used by 1 module(s), i. e.
    /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/ConstructedMainMenuItems.js
* /Users/path/to/babel-loader/lib/index.js!/Users/path/to/Navbar/MainMenuItemMobile.js
    Used by 1 module(s), i. e.
    /Users/path/to/babel-loader/lib/index.js!/Users/path/to/Navbar/ConstructedMainMenuItems.js
.....
(webpack)-hot-middleware/client.js ./src/index.js

O que é confuso é que os 'dois' arquivos referenciados são apenas um arquivo - não há dois arquivos no diretório cujos nomes diferem apenas no caso.

Também notei que meu recarregador ativo geralmente não detecta alterações em um arquivo se ele for afetado por esses avisos.

O que poderia estar causando esse problema?

Isso geralmente é o resultado de um erro de digitação minúsculo.

Por exemplo, se você estiver importando seus módulos import Vue from 'vue', como ,import Vuex from 'vuex' ,.

Percorra seus arquivos e verifique onde você usou from 'Vue'oufrom 'Vuex' - certifique-se de usar exatamente as mesmas letras maiúsculas (maiúsculas) que em suas declarações de importação.

As descrições de erro deveriam ter sido escritas de forma mais clara, mas o que eu expliquei foi a causa do meu problema todas as vezes para este erro nos comandos do webpack.

Para outras pessoas que estão enfrentando esse problema e tentaram as correções sugeridas sem sorte, aqui está outra solução possível.

Certifique-se de que o caminho que você usou em seu terminal tem a capitalização correta. Por exemplo, se você estiver usando git bash no Windows e seu projeto tiver o seguinte caminho:

C:\MyProjects\project-X

Se você acessá-lo usando cd /c/myprojects/project-x(observe a falta de maiúsculas) e depois executar, npm startpoderá enfrentar esse problema.

A solução seria considerar o caminho do projeto com distinção entre maiúsculas e minúsculas e usá-lo da seguinte maneira:

cd /C/MyProjects/project-X

Aconteceu comigo no angular 6. É um erro de uso incorreto de letras maiúsculas e minúsculas que seu ide ou editor de texto pode ignorar. EU USEI

import { PayComponent }      from './payment/pay/pay.component';

AO INVÉS DE

import { PayComponent }      from './Payment/pay/pay.component';

IMAGINE APENAS "P" e "p". Boa sorte.

OMG eu finalmente encontrei a solução para o meu problema.

Estou usando o VS Code Terminal e ele estava usando desktop em vez de Desktop no caminho do prompt:

C:\Users\Hans\desktop\NODE JS\mysite>

Para consertar, eu só tive que fechar a pasta do projeto e reabri-la:

File -> Close Folder
File -> Open Folder

E agora o VS Code Terminal está usando o caminho correto do prompt.

Eu tive o mesmo problema no projeto angular 6.

Este problema ocorreu porque ao importar componentes no módulo, como

import { ManageExamComponent } from './manage-Exam.component'; 

Eu escrevi como manage-Exam, onde Exam está em maiúscula e o webpack entende letras minúsculas .

Assim que eu usei

import { ManageExamComponent } from './manage-exam.component'; 

exame usado em pequenas e problema resolvido.

esse problema acontece comigo quando tento executar npm startno terminal vscode na máquina com janela. e a questão foi /desktop/flatsome, em vez /Desktop/flatsomeapenas mudar o caminho para desktop com um capital Dem vez de mesa com letras minúsculas dem seu terminal vscode

Corremos o react no Windows e um dos meus desenvolvedores viu isso, mas ninguém mais teve o problema.

Eu os observei abrir o VS Code em um subdiretório do projeto, em seguida, fiz uma cdno diretório do projeto com letras minúsculas (em vez da caixa mista real) e executei npm start.

Você pode realmente ver o nome do diretório em letras minúsculas no terminal, c:\someproject\somedirmas no Windows Explorer ele está c:\SomeProject\SomeDir.

Fiquei surpreso que o terminal de comando do Windows permite que você faça isso.

// waring
import Test from './TestHome'
// you can rename your file with camel-case and import
import Test from './test-home'
// or you should fix the path 
import Test from '@/views/TestHome'

Espero que as duas maneiras resolvam o seu problema。

Se você estiver usando o VS Code e " npm run dev ", mas a respectiva pasta do projeto não for aberta no VS Code, esses 3 avisos ocorrerão.

Portanto, a solução é: primeiro abra a respectiva pasta do projeto e, em seguida, execute apenas "npm run dev"

Sim, isso acontece se você usar usou o mesmo nome, mas com maiúsculas e minúsculas: por exemplo, você usou

import React from 'React';

Ao invés de:

import React from 'react';

Também tenho este aviso, mas meu problema é que, por exemplo, existe o diretório de arquivos do projeto React:

**/src/containers/PageOne/index.js
**/src/containers/PageTWO/pageOneAction.js

**/src/containers/PageOne/index.js
**/src/containers/PageTWO/pageTWOAction.js

E haverá um aviso semelhante. Porque é melhor você não usar o mesmo nome de arquivo (como action.jsnessas pastas) excluindo index.js, caso contrário, isso pode levar a um comportamento inesperado ao compilar em um sistema de arquivos com outra semântica de maiúsculas e minúsculas.

Para resolver esse aviso, podemos fazer o seguinte:

**/src/containers/PageOne/index.js
**/src/containers/PageOne/pageOneAction.js

**/src/containers/PageTWO/index.js
**/src/containers/PageTWO/pageTWOAction.js

Esta é a minha experiência, espero que possa ajudar alguém.

Eu tive um erro semelhante, mas não exatamente o mesmo descrito por outras respostas. Espero que minha resposta possa ajudar alguém.

Eu estava importando um arquivo em dois componentes (projeto angular 7):

Componente 1:

LANGUAGES = require("../../models/LANGUAGES.json");

Componente 2:

LANGUAGES = require("../../models/LANGUAGES.JSON");

Este é um erro tolo: o problema aqui é que estou usando dois requisitos diferentes no mesmo arquivo com letras maiúsculas diferentes (gerou um aviso).

Como resolver o problema ? Use o mesmo modelo.

Componente 1:

LANGUAGES = require("../../models/LANGUAGES.json");

Componente 2:

LANGUAGES = require("../../models/LANGUAGES.json");

OU

Componente 1:

LANGUAGES = require("../../models/LANGUAGES.JSON");

Componente 2:

LANGUAGES = require("../../models/LANGUAGES.JSON");

Problema semelhante, mas meu problema eram os pacotes instalados no C:\Users\<username>\AppData\Local\Yarn. Excluir essa pasta e adicionar novamente os pacotes globais que eu queria corrigiu o problema.

Eu tive o mesmo problema, nomeei minha pasta de reação como UI react e o caminho que foi gerado pelo webpack estava de alguma forma tornando-o em minúsculas.

Então, mudei o nome para ui, ou seja, em letras minúsculas em vez de IU , o que fez com que meu conflito fosse imediatamente.

Obrigado.

Se você estiver vendo isso no Visual Studio Code e no Gitbash, vá para as configurações e pesquise C: \ (C maiúsculo) e altere o caminho do Gitbash.exe para c: \ e ele irá embora.

No meu caso (Win7, VSCode, Angular 6), o problema persiste mesmo depois de corrigir o caminho do caso errado em todos os lugares. Parece que o webpack faz o cache do caminho de alguma forma, para resolvê-lo:

• Renomear pasta ou arquivo que causa problemas para algo diferente
• Construir
• Erro obtido
• Renomear de volta
• Construir
• Sucesso

Eu também tive o mesmo problema. Eu tinha navegado para um diretório Trade_v3, enquanto o diretório real era Trade_V3. Depois de mudar o diretório, este erro não jogou.

O caso da unidade de letras também importa. No meu caso, o Windows 10 tinha a letra 'C' maiúscula, enquanto eu tinha 'c' minúsculo no arquivo.

Eu enfrentei mesmo problema em Vue.js . Por fim, descobri que importei um componente em dois lugares com namespaces diferentes.

import Step1 from '~/Components/Application/Step1'

import Step1 from './Step1'

Corrigido alterando o segundo para:

import Step1 from '~/Components/Application/Step1'

Espero que ajude alguns de vocês ...

O mesmo problema aconteceu comigo, porque mudei o nome da pasta do meu projeto para "Myclass" e no git bash era "myclass" por algum motivo. Quando mudei para "m" mais baixo, a mensagem parou.

Nenhuma dessas soluções funcionou para mim. O que fez foi:

• Exclua os arquivos problemáticos (mas faça um backup deles em outro lugar!).
• Envie a mudança para o Git.
• Adicione os mesmos arquivos novamente do seu backup.
• Envie os novos arquivos para o Git ... problema resolvido!

No meu caso, simplesmente alterei a capitalização dos nomes dos arquivos que contêm os módulos importados. Eles estavam aparecendo em minúsculas no sistema de arquivos (OSX Finder, Bash) e no editor de código (VS Code). No entanto, abrir os arquivos no código do VS ainda me mostrava o nome do arquivo antigo na guia do editor de código. Tentei excluir completamente os arquivos e adicioná-los novamente. Isso não funcionou - os arquivos recém-adicionados ainda exibiam os nomes antigos nas guias do editor e minhas compilações ainda estavam quebrando.

Então, depois de algumas horas de tentativas fúteis de conserto, descobri que o Git não considera as alterações na capitalização do arquivo como alterações, então ele nunca realmente mudou esses nomes de arquivo:

Como faço para confirmar alterações de nome de arquivo com distinção entre maiúsculas e minúsculas no Git?

Então, apaguei os arquivos problemáticos, enviei para o Git, adicionei-os novamente e confirmei - e funcionou. Sem avisos e os erros de compilação desapareceram.

Se você tiver este erro no link de next.js (no React):

import Link from 'next/Link'

AO INVÉS DE

import Link from 'next/link'