Webpack: „istnieje wiele modułów o nazwach różniących się tylko wielkością liter”, ale moduły, do których się odwołujemy, są identyczne

Używam pakietu webpack 3.8.1 i otrzymuję kilka wystąpień następującego ostrzeżenia dotyczącego kompilacji:

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

Mylące jest to, że te „dwa” pliki to tylko jeden plik - w katalogu nie ma dwóch plików, których nazwy różnią się tylko wielkością liter.

Zauważyłem również, że mój gorący program przeładowujący często nie rejestruje zmian w pliku, jeśli mają na niego wpływ te ostrzeżenia.

Co może być przyczyną tego problemu?

Zwykle jest to wynikiem drobnej literówki.

Na przykład, jeśli jesteś importowanie modułów jak import Vue from 'vue', import Vuex from 'vuex'.

Przejrzyj swoje pliki i sprawdź, gdzie użyłeś from 'Vue'lub from 'Vuex'- upewnij się, że używasz dokładnie tych samych wielkich liter (wielkich liter), co w instrukcjach importu.

Opisy błędów powinny być napisane jaśniej, ale to, co wyjaśniłem, było przyczyną mojego problemu za każdym razem dla tego błędu w poleceniach webpacka.

Dla innych, którzy borykają się z tym problemem i próbowali sugerowanych poprawek bez powodzenia, oto inne możliwe rozwiązanie.

Upewnij się, że ścieżka, której użyłeś w swoim terminalu, ma poprawną wielkość liter. Na przykład, jeśli używasz git bash w systemie Windows, a Twój projekt ma następującą ścieżkę:

C:\MyProjects\project-X

Jeśli uzyskasz do niego dostęp za pomocą cd /c/myprojects/project-x(zwróć uwagę na brak wielkich liter), a następnie uruchomisz, npm startmożesz napotkać ten problem.

Rozwiązaniem byłoby rozważenie wielkości liter w ścieżce projektu i użycie jej w następujący sposób:

cd /C/MyProjects/project-X

Zdarzyło mi się to na kątowej 6. Jest to błąd użycia dużych i małych liter, który może zignorować Twój edytor ide lub tekstu. UŻYŁEM

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

ZAMIAST

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

WYOBRAŹ sobie TYLKO „P” i „p”. Powodzenia.

OMG, w końcu znalazłem rozwiązanie mojego problemu.

Używam terminala VS Code i używałem pulpitu zamiast pulpitu w ścieżce monitu:

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

Aby to naprawić, musiałem po prostu zamknąć folder projektu i ponownie go otworzyć:

File -> Close Folder
File -> Open Folder

A teraz terminal VS Code używa poprawnej ścieżki zachęty.

Miałem ten sam problem w projekcie Angular 6.

Ten problem wystąpił, ponieważ podczas importowania komponentu w module, np

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

Napisałem jak manage-Exam gdzie Exam jest zapisany wielką literą, a webpack rozumie małą literę .

Jak tylko użyłem

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

używany egzamin w małym i problem rozwiązany.

ten problem zdarza mi się, gdy próbuję uruchomić npm startw terminalu vscode na komputerze z systemem Windows. a problem polegał na tym, że /desktop/flatsomezamiast tego /Desktop/flatsomepo prostu zmień ścieżkę do Pulpitu za pomocą dużej Dlitery zamiast pulpitu z małymi literami dw terminalu vscode

Uruchomiliśmy reakcję w systemie Windows i jeden z moich programistów to zobaczył, ale nikt inny nie miał problemu.

Widziałem, jak otwierają VS Code w podkatalogu projektu, a cdnastępnie przechodzę do katalogu projektu małymi literami (zamiast rzeczywistej mieszanej wielkości liter), a następnie uruchamiam npm start.

Możesz faktycznie zobaczyć nazwę katalogu małymi literami w terminalu, c:\someproject\somedirale w Eksploratorze Windows tak jest c:\SomeProject\SomeDir.

Zaskoczyło mnie, że terminal poleceń systemu Windows pozwala to zrobić.

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

Mam nadzieję, że te dwa sposoby rozwiążą Twój problem。

Jeśli używasz VS Code i robisz „ npm run dev ”, ale odpowiedni folder projektu nie jest otwarty w VS Code, pojawią się te 3 ostrzeżenia .

Rozwiązanie jest następujące: najpierw otwórz odpowiedni folder projektu, a następnie wykonaj tylko polecenie „npm run dev”

Tak, dzieje się tak, jeśli użyłeś tej samej nazwy, ale zmieniono wielkość liter: na przykład użyłeś

import React from 'React';

Zamiast:

import React from 'react';

Mam też takie ostrzeżenie, ale moim problemem jest to, że np. Istnieje katalog plików projektu React:

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

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

I będzie podobne ostrzeżenie. Ponieważ lepiej nie używać tej samej nazwy pliku (na przykład action.jsw tych folderach) z wyłączeniem index.js, w przeciwnym razie może to prowadzić do nieoczekiwanego zachowania podczas kompilowania w systemie plików z inną semantyczną wielkością liter.

Aby rozwiązać to ostrzeżenie, możemy zrobić to:

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

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

To jest moje doświadczenie, mam nadzieję, że może komuś pomóc.

Miałem podobny błąd, ale nie dokładnie taki sam, jak opisano w innych odpowiedziach. Mam nadzieję, że moja odpowiedź może komuś pomóc.

Importowałem plik w dwóch komponentach (projekt Angular 7):

Składnik 1:

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

Składnik 2:

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

To głupi błąd: problem polega na tym, że używam dwóch różnych wymagań w tym samym pliku z różnymi dużymi literami (wygenerowało to ostrzeżenie).

Jak rozwiązać problem ? Użyj tego samego modelu.

Składnik 1:

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

Składnik 2:

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

LUB

Składnik 1:

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

Składnik 2:

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

Podobny problem, ale mój problem dotyczył pakietów zainstalowanych w C:\Users\<username>\AppData\Local\Yarn. Usunięcie tego folderu i ponowne dodanie pakietów globalnych, które chciałem, rozwiązało problem.

Miałem ten sam problem, nazwałem mój folder reakcji jako UI a ścieżka wygenerowana przez webpack w jakiś sposób była pisana małymi literami.

Więc zmieniłem jego nazwę na ui tj. Małymi literami zamiast UI , co sprawiło, że moja wojna od razu zniknęła.

Dzięki.

Jeśli widzisz to w Visual Studio Code i Gitbash, przejdź do ustawień i wyszukaj C: \ (wielkie litery C) i zmień ścieżkę do pliku Gitbash.exe na c: \ i zniknie.

W moim przypadku (Win7, VSCode, Angular 6) problem utrzymuje się nawet po naprawieniu wszędzie niewłaściwej ścieżki sprawy. Wygląda na to, że pakiet WebPack w jakiś sposób buforuje ścieżkę, więc aby go rozwiązać:

• Zmień nazwę folderu lub pliku, który powoduje problemy, na inną
• Budować
• Wystąpił błąd
• Zmień nazwę z powrotem
• Budować
• Sukces

Ja też miałem ten sam problem. Przeszedłem do katalogu Trade_v3, podczas gdy rzeczywisty katalog to Trade_V3. Po zmianie katalogu ten błąd nie zgłosił.

Liczy się również przypadek dysku literowego. W moim przypadku Windows 10 miał wielką literę „C”, podczas gdy ja miałem małą literę „c” w pliku.

I w obliczu tego samego problemu w Vue.js . Ostatecznie okazało się, że zaimportowałem komponent w dwóch miejscach z różnymi przestrzeniami nazw.

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

import Step1 from './Step1'

Naprawiono to, zmieniając drugi na:

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

Mam nadzieję, że niektórym z was to pomoże ...

Zdarzyło mi się to samo, ponieważ zmieniłem nazwę folderu projektu na „Myclass”, aw git bash z jakiegoś powodu było to „myclass”. Kiedy zmieniłem na niższe „m”, komunikat się zatrzymał.

Żadne z tych rozwiązań nie działało dla mnie. Co to było:

• Usuń problematyczne pliki (ale zrób ich kopię zapasową w innym miejscu!).
• Zatwierdź zmianę w Git.
• Dodaj ponownie te same pliki z kopii zapasowej.
• Zatwierdź nowe pliki w Git ... problem rozwiązany!

W moim przypadku po prostu zmieniłem wielkość liter w nazwach plików zawierających zaimportowane moduły. Pojawiały się jako małe litery w systemie plików (OSX Finder, Bash) oraz w edytorze kodu (VS Code). Jednak otwieranie plików w kodzie VS nadal wyświetlało starą nazwę pliku na karcie edytora kodu. Próbowałem całkowicie usunąć pliki, a następnie dodać je ponownie. To nie zadziałało - nowo dodane pliki nadal wyświetlały stare nazwy w zakładkach edytora, a moje kompilacje wciąż się psują.

Następnie po kilku godzinach daremnych prób naprawy odkryłem, że Git nie traktuje zmian wielkości liter w plikach jako zmian, więc tak naprawdę nigdy nie zmienił tych nazw plików:

Jak dokonać zmian w nazwach plików uwzględniających wielkość liter w Git?

Więc usunąłem problematyczne pliki, przekazałem je do Git, ponownie je dodałem i ponownie zatwierdziłem - i zadziałało. Brak ostrzeżeń i błędy kompilacji zniknęły.

Jeśli masz ten błąd w odsyłaczu do next.js (w Reakcie):

import Link from 'next/Link'

ZAMIAST

import Link from 'next/link'