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

86

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?

tcelferact
quelle
Überprüfen Sie dies, es könnte Ihr Problem lösen stackoverflow.com/questions/61054565/…
Sarthak Saklecha

Antworten:

147

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.

Matthiku
quelle
8
Sie haben Recht, es war der Pfadname, nicht der Modulname, und das hat mich umgehauen. Ich hatte NavBar/MainMenuItemMobile.js- das 'b' in Navbar hätte Kleinbuchstaben sein sollen.
Tcelferact
2
Genau, Alter, in meinem Fall habe ich beim Importieren React and Trow Error verwendet: import React, { Component } from 'React';um justfrom 'react
rflmyk
4
Mein Problem war, dass ich in einer Komponente referenzierte, components/vue.jswährend ich in einer anderen referenziertecomponents/Vue.js
Dennis
Ihr Kommentar @ adc17 hat mir geholfen, die kryptische Ausgabe zu verstehen. Lesen Sie diese Lösung im WebPack GitHub-Wiki und machen Sie einfach keinen Sinn daraus, da alles korrekt aussah. Es ist erstaunlich, wie nah 'l' wie 'L' aussieht, wenn der Text sehr klein eingestellt ist ... hehe.
Guy Park
1
Nur um zu add-- wenn ich diesen Fehler hatte, war es , weil mein Weg in GitBasheinen Klein hatte , userswo Webpackeine Groß erwartet Users.
sleepy_daze
82

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

Dimitar Dimitrov
quelle
11
Das ist genau mein Problem. Vielen Dank!
user2138568
1
Du hast meinen Tag gerettet! Danke vielmals!
Jeff Chen
1
Wow ... du hast mir gerade geholfen! Ich benutze Git Bash hauptsächlich unter Windows. Ich hatte das falsche Gehäuse, als ich es wechselte, funktionierte es. Es ist erwähnenswert, dass das falsche Gehäuse in Powershell nicht zu denselben Fehlern führt. Es sieht so aus, als würde der Pfad irgendwo hinter den Kulissen in den entsprechenden Fall konvertiert.
Ryan Eastabrook
2
Ich hatte genau dieses Problem; Nachdem ich jedoch verschiedene Pakete zu unterschiedlichen Zeiten mit unterschiedlichem Pfadgehäuse installiert hatte, wurde mein node_modulesOrdner abgespritzt. Ich habe es komplett gelöscht, erneut ausgeführt npm installund alle Warnungen sind verschwunden.
Nate
1
Du hast meinen Tag gerettet!
Hiruni Nimanthi
17

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.

Ahmed Adewale
quelle
1
Für mich war es datatables.net-fixedheader(richtig) statt DataTables.net-fixedheader(falsch) unter Windows 10.
Jonas Gröger
9

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.

Felipe
quelle
3

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.

Shashikant Pandit
quelle
3

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

Ndatimana Gilbert
quelle
Vielen Dank!. War verrückt geworden.
Oyalhi
2

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.

Simon Hutchison
quelle
1
Dies liegt daran, dass das Windows-Dateisystem die Groß- und Kleinschreibung nicht berücksichtigt. (war, weil Sie in Windows 10 festlegen können, dass zwischen Groß- und Kleinschreibung unterschieden wird, wie ich sehe)
Cody G
1
// 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。

Qian
quelle
1

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.

Shashank Shekhar Barik
quelle
1

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';
Jitendra Pal - JP
quelle
0

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.

aermin
quelle
0

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");
Emerica
quelle
0

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

Josh G.
quelle
0

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.

Rishabh Jain
quelle
0

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: \.

httpete
quelle
0

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
Schlampe
quelle
0

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.

Raja Sekar
quelle
0

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.

icernos
quelle
0

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

Sandip Mähne
quelle
0

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.

Chen Peleg
quelle
0

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.

d13
quelle
0

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

import Link from 'next/Link'

ANSTATT

import Link from 'next/link'
Mohammad Fallah
quelle