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?
webpack
webpack-hot-middleware
tcelferact
fonte
fonte
Respostas:
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.
fonte
NavBar/MainMenuItemMobile.js
- o 'b' em Navbar deveria estar em minúsculas.import React, { Component } from 'React';
to fix justfrom 'react
components/vue.js
enquanto em outro estava fazendo referênciacomponents/Vue.js
GitBash
tinha uma letra minúsculausers
ondeWebpack
esperava uma letra maiúsculaUsers
.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 start
poderá 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
fonte
node_modules
pasta foi inundada. Excluí completamente, executei novamentenpm install
e todos os avisos foram embora.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
AO INVÉS DE
IMAGINE APENAS "P" e "p". Boa sorte.
fonte
datatables.net-fixedheader
(correto) em vez deDataTables.net-fixedheader
(errado) no Windows 10.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:
Para consertar, eu só tive que fechar a pasta do projeto e reabri-la:
E agora o VS Code Terminal está usando o caminho correto do prompt.
fonte
Eu tive o mesmo problema no projeto angular 6.
Este problema ocorreu porque ao importar componentes no módulo, como
Eu escrevi como manage-Exam, onde Exam está em maiúscula e o webpack entende letras minúsculas .
Assim que eu usei
exame usado em pequenas e problema resolvido.
fonte
esse problema acontece comigo quando tento executar
npm start
no terminal vscode na máquina com janela. e a questão foi/desktop/flatsome
, em vez/Desktop/flatsome
apenas mudar o caminho para desktop com um capitalD
em vez de mesa com letras minúsculasd
em seu terminal vscodefonte
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
cd
no diretório do projeto com letras minúsculas (em vez da caixa mista real) e executeinpm start
.Você pode realmente ver o nome do diretório em letras minúsculas no terminal,
c:\someproject\somedir
mas no Windows Explorer ele estác:\SomeProject\SomeDir
.Fiquei surpreso que o terminal de comando do Windows permite que você faça isso.
fonte
// 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。
fonte
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"
fonte
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';
fonte
Também tenho este aviso, mas meu problema é que, por exemplo, existe o diretório de arquivos do projeto React:
E haverá um aviso semelhante. Porque é melhor você não usar o mesmo nome de arquivo (como
action.js
nessas pastas) excluindoindex.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:
Esta é a minha experiência, espero que possa ajudar alguém.
fonte
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:
Componente 2:
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:
Componente 2:
OU
Componente 1:
Componente 2:
fonte
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.fonte
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.
fonte
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.
fonte
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:
fonte
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.
fonte
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.
fonte
Eu enfrentei mesmo problema em Vue.js . Por fim, descobri que importei um componente em dois lugares com namespaces diferentes.
Corrigido alterando o segundo para:
Espero que ajude alguns de vocês ...
fonte
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.
fonte
Nenhuma dessas soluções funcionou para mim. O que fez foi:
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.
fonte
Se você tiver este erro no link de next.js (no React):
AO INVÉS DE
fonte