Webpack: "Es gibt mehrere Module mit Namen, die sich nur im Gehäuse unterscheiden", aber die Module, auf die verwiesen wird, sind identisch

Ich verwende Webpack 3.8.1 und erhalte mehrere Instanzen der folgenden Build-Warnung:

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

Was verwirrend ist, ist, dass die 'zwei' Dateien, auf die verwiesen wird, nur eine Datei sind - es gibt keine zwei Dateien im Verzeichnis, deren Namen sich nur für den Fall unterscheiden.

Ich habe auch festgestellt, dass mein Hot Reloader häufig keine Änderungen an einer Datei aufnimmt, wenn diese von diesen Warnungen betroffen sind.

Was könnte dieses Problem verursachen?

Dies ist normalerweise das Ergebnis eines winzigen Tippfehlers.

Zum Beispiel, wenn Sie Ihre Module wie importieren import Vue from 'vue', import Vuex from 'vuex'.

Durchsuchen Sie Ihre Dateien und überprüfen Sie, wo Sie sie verwendet haben, from 'Vue'oder from 'Vuex'- stellen Sie sicher, dass Sie genau die gleichen Großbuchstaben (Großbuchstaben) wie in Ihren Importanweisungen verwenden.

Die Fehlerbeschreibungen hätten klarer geschrieben werden sollen, aber was ich erklärt habe, war jedes Mal die Ursache meines Problems für diesen Fehler bei Webpack-Befehlen.

Für andere, die mit diesem Problem konfrontiert sind und die vorgeschlagenen Korrekturen ohne Erfolg ausprobiert haben, ist hier eine andere mögliche Lösung.

Stellen Sie sicher, dass der in Ihrem Terminal verwendete Pfad die richtige Groß- und Kleinschreibung aufweist. Wenn Sie beispielsweise git bash unter Windows verwenden und Ihr Projekt den folgenden Pfad hat:

C:\MyProjects\project-X

Wenn Sie mit cd /c/myprojects/project-x(beachten Sie das Fehlen von Kapitalfällen) darauf zugreifen und dann ausführen, npm startkann dieses Problem auftreten.

Die Lösung wäre, den Projektpfad zwischen Groß- und Kleinschreibung zu unterscheiden und ihn wie folgt zu verwenden:

cd /C/MyProjects/project-X

Es ist mir auf Winkel 6 passiert. Es ist ein Fehler beim Groß- und Kleinbuchstabenmissbrauch, den Ihre Idee oder Ihr Texteditor möglicherweise ignoriert. ICH BENUTZTE

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

ANSTATT

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

Stellen Sie sich nur "P" und "p" vor. Viel Glück.

OMG Ich habe endlich die Lösung für mein Problem gefunden.

Ich verwende das VS-Code-Terminal und es wurde Desktop anstelle von Desktop im Pfad der Eingabeaufforderung verwendet:

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

Um das Problem zu beheben, musste ich nur den Projektordner schließen und erneut öffnen:

File -> Close Folder
File -> Open Folder

Und jetzt verwendet das VS Code Terminal den richtigen Eingabeaufforderungspfad.

Ich hatte das gleiche Problem in Angular 6-Projekt.

Dieses Problem trat auf, weil beim Importieren von Komponenten in das Modul wie

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

Ich habe wie Manage-Prüfung geschrieben , wo Prüfung in ist Großbuchstaben und WebPACK versteht Minuskel .

Sobald ich verwendet habe

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

verwendete Prüfung in kleinen und Problem gelöst.

Dieses Problem tritt auf, wenn ich versuche, das npm startvscode-Terminal auf einem Windows-Computer auszuführen. und das Problem war /desktop/flatsomestattdessen, /Desktop/flatsomeeinfach den Pfad zu Desktop mit einem Großbuchstaben Danstelle von Desktop mit Kleinbuchstaben din Ihrem vscode-Terminal zu ändern

Wir reagieren unter Windows und einer meiner Entwickler hat dies gesehen, aber niemand anderes hatte das Problem.

Ich habe gesehen, wie sie VS-Code in einem Unterverzeichnis des Projekts geöffnet haben, dann ein cdProjektverzeichnis mit Kleinbuchstaben (anstelle des eigentlichen gemischten Großbuchstabens) erstellt und dann ausgeführt npm start.

Sie können den Verzeichnisnamen im Terminal tatsächlich in Kleinbuchstaben sehen c:\someproject\somedir, im Windows Explorer jedoch c:\SomeProject\SomeDir.

Ich war überrascht, dass das Windows-Befehlsterminal dies ermöglicht.

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

Hoffe, die beiden Möglichkeiten lösen Ihr Problem。

Wenn Sie VS Code verwenden und " npm run dev " ausführen , der entsprechende Projektordner jedoch nicht in VS Code geöffnet ist, werden diese 3 Warnungen angezeigt.

Die Lösung lautet also: Öffnen Sie zuerst den entsprechenden Projektordner und führen Sie dann nur "npm run dev" aus.

Ja, dies passiert, wenn Sie denselben Namen verwendet haben, die Groß- und Kleinschreibung jedoch geändert wurde: Sie haben beispielsweise verwendet

import React from 'React';

Anstatt:

import React from 'react';

Ich habe auch diese Warnung, aber mein Problem ist, dass es zum Beispiel das Dateiverzeichnis des React-Projekts gibt:

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

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

Und es wird eine ähnliche Warnung geben. Da Sie besser nicht denselben Dateinamen (wie action.jsin diesen Ordnern) ausschließen sollten index.js, kann dies zu unerwartetem Verhalten beim Kompilieren auf einem Dateisystem mit einer anderen Groß- / Kleinschreibung führen.

Um diese Warnung zu lösen, könnten wir das tun:

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

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

Dies ist meine Erfahrung, hoffe es könnte jemandem helfen.

Ich hatte einen ähnlichen Fehler, aber nicht genau den gleichen, den andere Antworten beschrieben haben. Ich hoffe meine Antwort kann jemandem helfen.

Ich habe eine Datei in zwei Komponenten importiert (Angular 7-Projekt):

Komponente 1:

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

Komponente 2:

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

Dies ist ein dummer Fehler: Das Problem hier ist, dass ich zwei verschiedene Anforderungen für dieselbe Datei mit unterschiedlichen Großbuchstaben verwende (es wurde eine Warnung generiert).

Wie löse ich das Problem? Verwenden Sie das gleiche Modell.

Komponente 1:

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

Komponente 2:

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

ODER

Komponente 1:

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

Komponente 2:

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

Ähnliches Problem, aber mein Problem waren Pakete, in denen installiert wurde C:\Users\<username>\AppData\Local\Yarn. Durch Löschen dieses Ordners und erneutes Hinzufügen der von mir gewünschten globalen Pakete wurde das Problem behoben.

Ich hatte das gleiche Problem, ich hatte meinen Reaktionsordner als Benutzeroberfläche bezeichnet und der Pfad, der vom Webpack generiert wurde, machte es irgendwie in Kleinbuchstaben.

Also habe ich es in ui umbenannt, dh in Kleinbuchstaben anstelle von UI , was dazu führte, dass mein Krieg sofort losging.

Vielen Dank.

Wenn dies in Visual Studio Code und Gitbash angezeigt wird, gehen Sie zu den Einstellungen, suchen Sie nach C: \ (Großbuchstaben C) und ändern Sie den Pfad für die Datei Gitbash.exe in c: \.

In meinem Fall (Win7, VSCode, Angular 6) bleibt das Problem bestehen, auch wenn ich überall den falschen Fallpfad behoben habe. Sieht so aus, als würde das Webpack den Pfad irgendwie zwischenspeichern, um ihn zu lösen:

• Benennen Sie Ordner oder Dateien, die Probleme verursachen, in etwas anderes um
• Bauen
• Fehler bekommen
• Zurück benennen
• Bauen
• Erfolg

Ich hatte auch das gleiche Problem. Ich hatte zu einem Verzeichnis Trade_v3 navigiert, während das eigentliche Verzeichnis Trade_V3 war. Nach dem Ändern des Verzeichnisses wurde dieser Fehler nicht ausgelöst.

Der Fall des Briefantriebs spielt ebenfalls eine Rolle. In meinem Fall hatte Windows 10 den Großbuchstaben 'C', während ich den Kleinbuchstaben 'c' in der Datei hatte.

Ich konfrontierte gleiches Problem in Vue.js . Schließlich stellte sich heraus, dass ich eine Komponente an zwei Stellen mit unterschiedlichen Namespaces importierte.

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

import Step1 from './Step1'

Es wurde behoben, indem der zweite geändert wurde in:

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

Hoffentlich hilft es einigen von euch ...

Das gleiche Problem ist mir passiert, weil ich den Namen meines Projektordners in "Myclass" geändert habe und es in git bash aus irgendeinem Grund "myclass" war. Als ich auf "m" umstellte, wurde die Nachricht gestoppt.

Keine dieser Lösungen hat bei mir funktioniert. Was tat war:

• Löschen Sie die problematischen Dateien (aber sichern Sie sie woanders!).
• Übernehmen Sie die Änderung an Git.
• Fügen Sie dieselben Dateien erneut aus Ihrem Backup hinzu.
• Übertragen Sie die neuen Dateien auf Git ... Problem gelöst!

In meinem Fall hatte ich einfach die Großschreibung meiner Dateinamen geändert, die die importierten Module enthielten. Sie wurden im Dateisystem (OSX Finder, Bash) und im Code-Editor (VS Code) als Kleinbuchstaben angezeigt. Beim Öffnen der Dateien im VS-Code wurde mir jedoch immer noch der alte Dateiname auf der Registerkarte Code-Editor angezeigt. Ich habe versucht, die Dateien vollständig zu löschen und sie dann erneut hinzuzufügen. Dies funktionierte nicht - die neu hinzugefügten Dateien zeigten immer noch die alten Namen in den Editor-Registerkarten an, und meine Builds waren immer noch fehlerhaft.

Nach einigen Stunden vergeblicher Korrekturversuche stellte ich dann fest, dass Git Änderungen an der Dateikapitalisierung nicht als Änderungen betrachtet, sodass diese Dateinamen nie geändert wurden:

Wie kann ich nur Dateinamenänderungen in Git zwischen Groß- und Kleinschreibung festlegen?

Also habe ich die problematischen Dateien gelöscht, für Git festgeschrieben, sie erneut hinzugefügt und erneut festgeschrieben - und es hat funktioniert. Keine Warnungen und die Build-Fehler verschwanden.

Wenn Sie diesen Fehler im Link von next.js (in React) haben:

import Link from 'next/Link'

ANSTATT

import Link from 'next/link'