web-dev-qa-db-fra.com

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

J'utilise le 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 les cas. 

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?

webpackwebpack-hot-middleware
21
adc17

Ceci est généralement le résultat d'une faute de frappe minuscule. 

Si vous importez vos modules comme import Vue from 'vue', import Vuex from 'vuex'.

Parcourez vos fichiers et vérifiez où vous avez utilisé from 'Vue' ou from 'Vuex' 

Les descriptions d'erreur auraient dû être écrites plus clairement, mais ce que j'ai expliqué a été la cause de mon problème chaque fois pour cette erreur sur les commandes webpack.

35
matthiku

C’est ce qui m’est arrivé sur angular 6 . C’est une erreur d’usage abusif majuscule et lettre minuscule que votre éditeur de texte ou votre éditeur de texte peuvent 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.

2
lilhamad

Pour les autres personnes confrontées à ce problème et ayant essayé les solutions suggérées sans succès, voici une autre solution possible.

Assurez-vous que le chemin que vous avez utilisé dans votre terminal a la capitalisation correcte. Par exemple, si vous utilisez git bash sous Windows et que votre projet a le chemin suivant:

C:\MyProjects\project-X

Si vous y accédez à l'aide de cd /c/myprojects/project-x (notez le manque de majuscules), puis exécutez npm start, vous risquez de rencontrer ce problème.

La solution consisterait à considérer le chemin du projet comme sensible à la casse et à l’utiliser comme suit:

cd /C/MyProjects/project-X

1
Dimitar Dimitrov

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

Ce problème s’est produit car lors de l’importation de composants dans le module, comme

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

J'ai écrit comme gérer-examen où examen est en lettre majuscule et webpack comprendre lettre minuscule . 

Dès que j'ai utilisé

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

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

1
Shashikant Pandit

Un problème similaire, mais mon problème était les paquets installés dans C:\Users\<username>\AppData\Local\Yarn. La suppression de ce dossier et l'ajout des packages globaux que je souhaitais ont résolu le problème.

0
Josh G

J'ai eu une erreur similaire mais pas exactement la même chose décrite par d'autres réponses. J'espère que ma réponse pourra aider quelqu'un.

J'importais un fichier en deux composants (projet angular 7):

Composant 1:

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

Composante 2:

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

C'est une erreur stupide: le problème ici est que j'utilise deux différences différentes sur le même fichier avec des majuscules différentes (cela a généré un avertissement).

Comment résoudre le problème ? Utilisez le même modèle.

Composant 1:

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

Composante 2:

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

OR

Composant 1:

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

Composante 2:

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

J'ai aussi cet avertissement, mais mon problème est que, par exemple, il y a le répertoire de fichiers du projet React:

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

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

Et il y aura un avertissement similaire. Dans la mesure où vous feriez mieux de ne pas utiliser le même nom de fichier (tel que action.js dans ces dossiers) à l'exception de index.js, cela pourrait entraîner un comportement inattendu lors de la compilation sur un système de fichiers avec une autre sémantique.

Pour résoudre cet avertissement, nous pourrions le faire:

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

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

C’est mon expérience, espérons que cela pourrait aider quelqu'un.

0
aermin