Web paketi: "Yalnızca kasada farklı olan adlara sahip birden fazla modül var" ancak başvurulan modüller aynıdır

Web paketi 3.8.1 kullanıyorum ve aşağıdaki yapı uyarısının birkaç örneğini alıyorum:

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

Kafa karıştırıcı olan, referans verilen 'iki' dosyanın sadece bir dosya olmasıdır - dizinde isimleri sadece duruma göre farklılık gösteren iki dosya yoktur.

Ayrıca, çalışırken yeniden yükleyicimin, bu uyarılardan etkilenmesi durumunda bir dosyadaki değişiklikleri genellikle algılamadığını fark ettim.

Bu soruna ne sebep olabilir?

Bu genellikle çok küçük bir yazım hatası sonucudur.

Örneğin, sevdiği modülleri ithal ediyoruz eğer import Vue from 'vue', import Vuex from 'vuex'.

Dosyalarınızı gözden geçirin ve nerede kullandığınızı kontrol edin from 'Vue'veya from 'Vuex'- ithalat ifadelerinizde olduğu gibi tam olarak aynı büyük harfleri (büyük harfler) kullandığınızdan emin olun.

Hata açıklamaları daha net yazılmalıydı, ancak açıkladığım şey, webpack komutlarındaki bu hata için her seferinde sorunumun nedeni oldu.

Bu sorunla karşı karşıya olan ve önerilen düzeltmeleri şanssız deneyenler için, işte başka bir olası çözüm.

Terminalinizde kullandığınız yolun doğru büyük harf kullanımına sahip olduğundan emin olun. Örneğin, Windows'ta git bash kullanıyorsanız ve projeniz aşağıdaki yola sahipse:

C:\MyProjects\project-X

Kullanarak erişirseniz cd /c/myprojects/project-x(büyük harflerin olmamasına dikkat edin) ve ardından çalıştırırsanız, npm startbu sorunla karşılaşabilirsiniz.

Çözüm, proje yolunu büyük / küçük harfe duyarlı olarak değerlendirmek ve aşağıdaki gibi kullanmak olacaktır:

cd /C/MyProjects/project-X

Açısal 6'da başıma geldi. İde veya metin editörünüzün görmezden gelebileceği büyük ve küçük harfli yanlış kullanım hatası. KULLANDIM

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

ONUN YERİNE

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

SADECE "P" ve "p" yi HAYAL EDİN. İyi şanslar.

OMG Sonunda sorunuma çözüm buldum.

Ben kullanıyorum VS Kod Terminali ve kullanıyordum masaüstü yerine Masaüstü istemi yolunda:

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

Düzeltmek için proje klasörünü kapatıp yeniden açmam gerekiyordu:

File -> Close Folder
File -> Open Folder

Ve şimdi VS Kod Terminali doğru komut istemi yolunu kullanıyor.

Ben de açısal 6 projesinde aynı sorunu yaşadım.

Bu sorun, modüldeki bileşen içe aktarılırken

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

Exam'in büyük harfle yazıldığı ve webpack'in küçük harfleri anladığı yönet-Sınav gibi yazdım .

Kullanır kullanmaz

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

küçük kullanılan sınav ve sorun çözüldü.

npm startpencere makinesinde vscode terminalinde çalıştırmayı denediğimde bu sorun bana oluyor . ve sorun /desktop/flatsomebunun yerine masaüstüne /Desktop/flatsomegiden yolu vscode terminalinizde Dküçük harfle büyük harf yerine büyük harfle değiştirmektir d.

React'i Windows'ta çalıştırıyoruz ve geliştiricilerimden biri bunu gördü, ancak başka kimsede sorun yoktu.

VS Code'u projenin bir alt dizinine açtıklarını izledim, sonra cdproje dizinine küçük harfle (gerçek karışık durum yerine) bir yaptım , sonra çalıştırdım npm start.

Aslında dizin adını terminalde olduğu gibi küçük harfle görebilirsiniz, c:\someproject\somedirancak Windows gezgininde olduğu gibi c:\SomeProject\SomeDir.

Windows komut terminalinin bunu yapmanıza izin vermesine şaşırdım.

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

Umarım iki yol sorununuzu çözer。

VS Code kullanıyorsanız ve " npm run dev " yapıyorsanız ancak ilgili proje klasörü VS Code'da açılmazsa , bu 3 uyarı ortaya çıkar.

Çözüm şudur: Önce ilgili proje klasörünü açın, ardından sadece "npm dev çalıştır" yapın

Evet, aynı adı kullanırsanız, ancak büyük / küçük harf değişmişse bu olur: örneğin,

import React from 'React';

Onun yerine:

import React from 'react';

Next.js (React'e) bağlantısında bu hatayı alıyorsanız:

import Link from 'next/Link'

ONUN YERİNE

import Link from 'next/link'

Bende de bu uyarı var ama benim sorunum, örneğin React projesinin dosya dizini var:

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

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

Ve benzer bir uyarı olacak. Aynı dosya adını ( action.jsbu klasörlerde olduğu gibi ) hariç tutmamanız daha iyi olduğundan index.js, aksi takdirde bu, başka bir büyük / küçük harf anlamıyla bir dosya sisteminde derleme yaparken beklenmeyen davranışlara yol açabilir.

Bu uyarıyı çözmek için şunu yapabiliriz:

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

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

Bu benim deneyimim, umarım birine yardımcı olur.

Benzer bir hatayla karşılaştım, ancak diğer yanıtlarla tam olarak aynı değil Umarım cevabım birine yardımcı olabilir.

Bir dosyayı iki bileşende içe aktarıyordum (açısal 7 projesi):

Bileşen 1:

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

Bileşen 2:

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

Bu aptalca bir hatadır: Buradaki sorun şu ki, aynı dosyada farklı büyük harflerle iki farklı gerektirir (bir uyarı oluşturdu).

Problem nasıl çözülür? Aynı modeli kullanın.

Bileşen 1:

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

Bileşen 2:

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

VEYA

Bileşen 1:

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

Bileşen 2:

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

Benzer bir sorun, ancak benim sorunum içinde yüklü paketlerdi C:\Users\<username>\AppData\Local\Yarn. Bu klasörü silmek ve genel paketleri yeniden eklemek sorunu çözdüm.

Aynı sorunu yaşadım, react klasörümü UI olarak adlandırdım ve webpack tarafından oluşturulan yol bir şekilde onu küçük harfte yapıyordu.

Ben de onu ui olarak yeniden adlandırdım, yani UI yerine küçük harfle , bu benim savaşımın hemen başlamasını sağladı.

Teşekkürler.

Bunu Visual Studio Code ve Gitbash'te görüyorsanız, ayarlara gidin ve C: \ (C büyük harfini) arayın ve Gitbash.exe'nin yolunu c: \ olarak değiştirin ve kaybolacaktır.

Benim durumumda (Win7, VSCode, Angular 6), her yerde yanlış durum yolunu düzelttikten sonra bile sorun devam ediyor. Görünüşe göre web paketi yolu bir şekilde önbelleğe alıyor, bu yüzden çözmek için:

• Farklı bir şekilde sorunlara neden olan klasörü veya dosyayı yeniden adlandırın
• İnşa etmek
• Hata var
• Yeniden adlandırın
• İnşa etmek
• Başarı

Ben de aynı sorunu yaşadım. Asıl dizin Trade_V3 iken bir Trade_v3 dizinine gittim. Dizini değiştirdikten sonra bu hata oluşmadı.

Harf sürücüsünün durumu da önemlidir. Benim durumumda, dosyada küçük harf 'c' varken, Windows 10'da büyük harf 'C' vardı.

Vue.js'de de aynı sorunla karşılaştım . Sonunda, bir bileşeni farklı ad alanlarına sahip iki yerde içe aktardığım ortaya çıktı.

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

import Step1 from './Step1'

İkincisini şu şekilde değiştirerek düzeltildi:

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

Umarım bazılarınıza yardımcı olur ...

Aynı sorun bana da oldu, çünkü proje klasörümün adını "Sınıfım" olarak değiştirdim ve git bash'da bir nedenle "sınıfım" oldu. "M" değerini düşürdüğümde mesaj durdu.

Bu çözümlerin hiçbiri benim için işe yaramadı. Ne yaptı:

• Sorunlu dosyaları silin (ancak bunların yedeğini başka bir yerde alın!).
• Değişikliği Git'e işleyin.
• Aynı dosyaları yedeklemenizden yeniden ekleyin.
• Yeni dosyaları Git'e teslim edin ... sorun çözüldü!

Benim durumumda, içe aktarılan modülleri içeren dosya isimlerimin büyük harf kullanımını değiştirmiştim. Dosya sisteminde (OSX Finder, Bash) ve kod düzenleyicide (VS Code) küçük harf olarak görünüyorlardı. Ancak, dosyaları VS kodunda açmak, kod düzenleyici sekmesindeki eski dosya adını göstermeye devam ediyordu. Dosyaları tamamen silmeyi ve ardından yeniden eklemeyi denedim. Bu işe yaramadı - yeni eklenen dosyalar hala editör sekmelerinde eski isimleri gösteriyordu ve yapılarım hala bozuluyordu.

Birkaç saatlik beyhude düzeltme denemelerinden sonra, Git'in dosya büyük harf kullanımındaki değişiklikleri değişiklik olarak görmediğini keşfettim, bu nedenle bu dosya adlarını asla değiştirmedi:

Git'te yalnızca büyük / küçük harfe duyarlı dosya adı değişikliklerini nasıl taahhüt ederim?

Bu yüzden, Git'e adanmış sorunlu dosyaları sildim, yeniden ekledim ve yeniden işledim - ve işe yaradı. Uyarı yok ve derleme hataları ortadan kalktı.

Aynı sorunu yaşadım ve sonra vue dosyamın şu şekilde küçük harflerle adlandırıldığını öğrendim: event.vue. Çözmek için Event.vue olarak yeniden adlandırdım ve içe aktardığım yeri güncelledim ve sonra çalıştı. İthalat beyanı için şöyle görünüyordu:

Önce

Olayı '@ / components / NewsAndEvents / event'den içe aktar Dosyayı yeniden adlandırdıktan sonra şu şekilde görünmelidir:

Etkinliği '@ / components / NewsAndEvents / Event'den içe aktar