Webpack: «il existe plusieurs modules dont les noms ne diffèrent que par le boîtier» mais les modules référencés sont identiques

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 casse.

J'ai également remarqué que mon chargeur à chaud ne prend souvent pas en compte les modifications apportées à un fichier s'il est affecté par ces avertissements.

Qu'est-ce qui pourrait causer ce problème?

Ceci est généralement 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'.

Parcourez vos fichiers et vérifiez où vous avez utilisé from 'Vue'ou from 'Vuex'- assurez-vous d'utiliser exactement les mêmes majuscules (majuscules) que dans vos instructions d'importation.

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

Pour les autres qui sont confrontés à ce problème et ont essayé les correctifs suggérés sans succès, voici une autre solution possible.

Assurez-vous que le chemin que vous avez utilisé dans votre terminal a la bonne capitalisation. 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 en utilisant cd /c/myprojects/project-x(notez le manque de majuscules), puis exécutez, npm startvous risquez de rencontrer ce problème.

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

cd /C/MyProjects/project-X

Cela m'est arrivé sur angulaire 6. C'est une erreur d'utilisation abusive de majuscules et minuscules que votre éditeur de texte ou d'ide peut ignorer. J'AI UTILISÉ

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

AU LIEU DE

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

IMAGINEZ JUSTE "P" et "p". Bonne chance.

OMG j'ai enfin trouvé la solution à mon problème.

J'utilise le terminal VS Code et il utilisait le bureau au lieu du bureau dans le chemin de l'invite:

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

Pour y remédier, il me suffisait de fermer le dossier du projet et de le rouvrir:

File -> Close Folder
File -> Open Folder

Et maintenant, le terminal de code VS utilise le chemin d'invite correct.

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

Ce problème s'est produit car lors de l'importation d'un composant dans le module comme

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

J'ai écrit comme gérer-Exam où l'examen est en majuscule et le webpack comprend la petite lettre .

Dès que j'ai utilisé

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

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

ce problème m'arrive lorsque j'essaie d'exécuter npm startdans le terminal vscode sur une machine Windows. et le problème était /desktop/flatsomeplutôt de /Desktop/flatsomesimplement changer le chemin d'accès au bureau avec une majuscule Dau lieu de bureau avec des minuscules ddans votre terminal vscode

Nous exécutons react sur Windows et l'un de mes développeurs l'a vu, mais personne d'autre n'a eu le problème.

Je les ai regardés ouvrir VS Code dans un sous-répertoire du projet, puis faire un cddans le répertoire du projet en minuscules (au lieu du cas mixte réel), puis exécuter npm start.

Vous pouvez en fait voir le nom du répertoire en minuscules dans le terminal, c:\someproject\somedirmais dans l'explorateur Windows, il l'est c:\SomeProject\SomeDir.

J'ai été surpris que le terminal de commande Windows vous permette de le faire.

// 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'

J'espère que les deux façons résoudront votre problème。

Si vous utilisez VS Code et que vous faites " npm run dev " mais que le dossier de projet respectif n'est pas ouvert dans VS Code, ces 3 avertissements se produiront.

La solution est donc la suivante: ouvrez d'abord le dossier de projet respectif, puis ne faites que "npm run dev"

Oui, cela se produit si vous utilisez avez utilisé le même nom mais avec la casse modifiée: par exemple, vous avez utilisé

import React from 'React';

Au lieu de:

import React from 'react';

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. Parce que vous feriez mieux de ne pas utiliser le même nom de fichier (comme action.jsdans ces dossiers) à l'exclusion index.js, sinon cela peut entraîner un comportement inattendu lors de la compilation sur un système de fichiers avec une autre sémantique de casse.

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, j'espère que cela pourrait aider quelqu'un.

J'ai eu une erreur similaire mais pas exactement la même 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 exigences différentes sur le même fichier avec des lettres 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");

OU

Composant 1:

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

Composante 2:

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

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

J'ai eu le même problème, j'avais nommé mon dossier de réaction en tant qu'interface utilisateur et le chemin d'accès généré par Webpack le faisait en quelque sorte en minuscules.

Donc, je l'ai renommé en ui, c'est-à-dire en minuscules au lieu d' interface utilisateur , ce qui a fait disparaître ma guerre tout de suite.

Merci.

Si vous voyez cela dans Visual Studio Code et Gitbash, accédez aux paramètres et recherchez C: \ (C majuscule) et modifiez le chemin d'accès de Gitbash.exe en c: \ et il disparaîtra.

Dans mon cas (Win7, VSCode, Angular 6), le problème persiste même après avoir corrigé le mauvais chemin d'accès partout. On dirait que webpack cache le chemin, alors pour le résoudre:

• Renommez le dossier ou le fichier qui pose des problèmes en quelque chose de différent
• Construire
• Erreur
• Renommer
• Construire
• Succès

J'ai aussi eu le même problème. J'avais navigué vers un répertoire Trade_v3, alors que le répertoire actuel était Trade_V3. Après avoir changé le répertoire, cette erreur n'a pas provoqué.

Le cas du lecteur de lettres compte également. Dans mon cas, Windows 10 avait la majuscule «C» tandis que j'avais minuscule «c» dans le fichier.

J'ai fait face même problème dans Vue.js . Finalement, il s'est avéré que j'ai importé un composant à deux endroits avec des espaces de noms différents.

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

import Step1 from './Step1'

Correction du problème en changeant le deuxième en:

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

J'espère que cela aidera certains d'entre vous ...

Le même problème m'est arrivé, car j'ai changé le nom de mon dossier de projet en "Myclass", et dans git bash c'était "myclass" pour une raison quelconque. Lorsque je suis passé à un "m" inférieur, le message s'est arrêté.

Aucune de ces solutions n'a fonctionné pour moi. Ce qui a fait était:

• Supprimez les fichiers problématiques (mais faites-en une sauvegarde ailleurs!).
• Validez la modification dans Git.
• Ajoutez à nouveau les mêmes fichiers à partir de votre sauvegarde.
• Validez les nouveaux fichiers sur Git ... problème résolu!

Dans mon cas, j'avais simplement changé la capitalisation de mes noms de fichiers contenant les modules importés. Ils apparaissaient en minuscules dans le système de fichiers (OSX Finder, Bash) et dans l'éditeur de code (VS Code). Cependant, l'ouverture des fichiers en code VS me montrait toujours l'ancien nom de fichier dans l'onglet de l'éditeur de code. J'ai essayé de supprimer complètement les fichiers, puis de les rajouter. Cela n'a pas fonctionné - les fichiers nouvellement ajoutés affichaient toujours les anciens noms dans les onglets de l'éditeur, et mes versions étaient toujours en panne.

Ensuite, après quelques heures de tentatives de correction futiles, j'ai découvert que Git ne considérait pas les changements de capitalisation des fichiers comme des changements, donc il n'a jamais changé ces noms de fichiers:

Comment valider uniquement les changements de nom de fichier sensibles à la casse dans Git?

J'ai donc supprimé les fichiers problématiques, commis à Git, les ai rajoutés et réengagés - et cela a fonctionné. Aucun avertissement et les erreurs de construction ont disparu.

Si vous avez cette erreur dans le lien de next.js (dans React):

import Link from 'next/Link'

AU LIEU DE

import Link from 'next/link'