Webpack: "il y a plusieurs modules avec des noms qui ne diffèrent que par leur cas" mais les modules référencés sont identiques

Question

J'utilise Webpack 3.8.1 et je reçois plusieurs instances de l'avertissement de construction suivant:

 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
 

Ce qui est déroutant, c'est que les «deux» fichiers référencés ne sont qu'un seul fichier. Il n'y a pas deux fichiers dans le répertoire dont les noms ne diffèrent que par la casse.

J'ai également remarqué que souvent, mon rechargeur à chaud ne détecte pas les modifications apportées à un fichier s'il est affecté par ces avertissements.

Quelle pourrait être la cause de ce problème?

Answer 1

C'est habituellement le résultat d'une minuscule faute de frappe.

Par exemple, si vous importez vos modules comme import Vue from 'vue', import Vuex from 'vuex'.

Aller à travers vos fichiers et de vérifier où vous avez utilisé from 'Vue' ou from 'Vuex' - assurez-vous d'utiliser exactement le même capitales (majuscules) comme dans vos déclarations d'importation.

Les descriptions d'erreur doit avoir été écrit plus clairement, mais ce que j'ai expliqué a été la cause de mon problème à chaque fois pour cette erreur sur webpack commandes.

Answer 2

Pour les autres qui sont confrontés à ce problème et a essayé la suggestion de correction avec pas de chance, ici, est une autre solution possible.

S'assurer que le chemin que vous avez utilisé dans votre terminal a la bonne casse. Par exemple, si vous utilisez git bash sous Windows et de votre projet de a le chemin d'accès suivant:

C:\MyProjects\project-X

Si vous accéder à l'aide d' cd /c/myprojects/project-x (à noter que le manque de capitaux des cas), puis exécutez npm start vous pourriez faire face à ce problème.

La solution serait de considérer le projet chemin de la casse et de l'utiliser comme suit:

cd /C/MyProjects/project-X

Answer 3

C'est ce qui m'est arrivé sur angular 6. C'est une erreur d'utilisation abusive de la lettre majuscule et petite que votre éditeur de texte ou d'idées peut ignorer. J'AI UTILISÉ

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

AU LIEU DE

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

IMAGINE JUST "P" et "p". Bonne chance.

Answer 4

Nous courons à réagir sur Windows et un de mes développeurs ont vu cela, mais personne d'autre n'a eu le problème.

Je les regardais ouvert VS Code d'un sous-répertoire du projet, puis a un cd le répertoire du projet avec des lettres minuscules (au lieu de la véritable casse mixte), puis exécutez npm start.

Vous pouvez voir le nom du répertoire en minuscules dans le terminal en tant que c:\someproject\somedir mais dans l'explorateur Windows, c'est - c:\SomeProject\SomeDir.

J'ai été surpris de commande Windows terminal vous permet de faire cela.

Answer 5

J'ai eu le même problème dans le projet angulaire 6.

Ce problème est dû au fait que lors de l'importation d'un composant dans le module, comme

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

J'ai écrit comme gérer-examen où l'examen est en majuscule et Webpack comprend les petites lettres .

Dès que j'ai utilisé

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

examen utilisé dans petit et problème résolu.