Webpack: "ci sono più moduli con nomi che differiscono solo nel case" ma i moduli a cui si fa riferimento sono identici

Sto usando webpack 3.8.1 e ricevo diverse istanze del seguente avviso di build:

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

Ciò che è fonte di confusione è che i "due" file a cui si fa riferimento sono solo un file: non ci sono due file nella directory i cui nomi differiscono solo nel caso.

Ho anche notato che il mio ricaricatore a caldo spesso non rileva le modifiche a un file se è interessato da questi avvisi.

Cosa potrebbe causare questo problema?

Questo di solito è il risultato di un errore di battitura minuscolo.

Per esempio, se si importano i moduli come import Vue from 'vue', import Vuex from 'vuex'.

Passa attraverso i tuoi file e controlla dove hai usato from 'Vue'o from 'Vuex'- assicurati di usare esattamente le stesse maiuscole (lettere maiuscole) delle tue istruzioni di importazione.

Le descrizioni degli errori avrebbero dovuto essere scritte in modo più chiaro, ma ciò che ho spiegato è stata la causa del mio problema ogni volta per questo errore sui comandi webpack.

Per gli altri che stanno affrontando questo problema e hanno provato le soluzioni suggerite senza fortuna, ecco un'altra possibile soluzione.

Assicurati che il percorso che hai utilizzato nel tuo terminale abbia le lettere maiuscole corrette. Ad esempio, se stai usando git bash su Windows e il tuo progetto ha il seguente percorso:

C:\MyProjects\project-X

Se accedi usando cd /c/myprojects/project-x(nota la mancanza di maiuscole) e poi eseguinpm start potresti affrontare questo problema.

La soluzione sarebbe considerare il percorso del progetto con distinzione tra maiuscole e minuscole e usarlo come segue:

cd /C/MyProjects/project-X

Mi è successo su angolare 6. È un errore di uso improprio di lettere maiuscole e minuscole che il tuo ide o editor di testo potrebbe ignorare. ERO SOLITO

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

INVECE DI

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

IMMAGINA SOLO "P" e "p". In bocca al lupo.

OMG ho finalmente trovato la soluzione al mio problema.

Sto usando il terminale VS Code e stava usando il desktop invece del desktop nel percorso del prompt:

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

Per risolverlo, ho solo dovuto chiudere la cartella del progetto e riaprirla:

File -> Close Folder
File -> Open Folder

E ora il terminale VS Code utilizza il percorso del prompt corretto.

Ho avuto lo stesso problema nel progetto angolare 6.

Questo problema si è verificato perché durante l'importazione di componenti nel modulo come

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

Ho scritto come gestire-esame dove l'esame è in maiuscolo e webpack capisce lettera minuscola .

Non appena l'ho usato

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

esame utilizzato in piccolo e problema risolto.

questo problema si verifica quando provo a eseguire npm startnel terminale vscode su una macchina finestra. e il problema era /desktop/flatsomeinvece /Desktop/flatsomesolo cambiare il percorso del desktop con la maiuscola Dinvece del desktop con le minuscole dnel tuo terminale vscode

Corriamo su Windows e uno dei miei sviluppatori lo ha visto, ma nessun altro ha avuto il problema.

Li ho visti aprire VS Code in una sottodirectory del progetto, poi ho fatto una cdalla directory del progetto con lettere minuscole (invece del vero e proprio caso misto), quindi eseguito npm start.

Si potrebbe effettivamente vedere il nome della directory in minuscolo nel terminale come c:\someproject\somedirma in Esplora risorse di Windows lo èc:\SomeProject\SomeDir .

Sono rimasto sorpreso che il terminale di comando di Windows ti permetta di farlo.

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

Spero che i due modi risolvano il tuo problema。

Se stai usando VS Code e stai facendo " npm run dev " ma la rispettiva cartella del progetto non è aperta in VS Code allora questi 3 avvisi si verificheranno .

Quindi la soluzione è: prima apri la rispettiva cartella del progetto, quindi fai solo "npm run dev"

Sì questo succede se usi hai usato lo stesso nome ma con maiuscolo cambiato: ad esempio, hai usato

import React from 'React';

Invece di:

import React from 'react';

Ho anche questo avviso, ma il mio problema è che, ad esempio, c'è la directory dei file del progetto React:

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

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

E ci sarà un avvertimento simile. Perché è meglio non usare lo stesso nome di file (come action.jsin quelle cartelle) escludendo index.js, altrimenti questo può portare a comportamenti imprevisti durante la compilazione su un file system con altra semantica maiuscola.

Per risolvere questo avviso, potremmo farlo:

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

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

Questa è la mia esperienza, spero che possa aiutare qualcuno.

Ho avuto un errore simile ma non esattamente lo stesso descritto da altre risposte. Spero che la mia risposta possa aiutare qualcuno.

Stavo importando un file in due componenti (progetto angular 7):

Componente 1:

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

Componente 2:

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

Questo è un errore sciocco: il problema qui è che sto usando due requisiti diversi sullo stesso file con lettere maiuscole diverse (ha generato un avviso).

Come risolvere il problema ? Usa lo stesso modello.

Componente 1:

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

Componente 2:

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

O

Componente 1:

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

Componente 2:

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

Problema simile, ma il mio problema era che i pacchetti installati in C:\Users\<username>\AppData\Local\Yarn. Eliminando quella cartella e aggiungendo nuovamente i pacchetti globali che volevo risolvere il problema.

Ho avuto lo stesso problema, avevo chiamato la mia cartella React come UI e il percorso generato da webpack lo faceva in qualche modo in minuscolo.

Quindi, l'ho rinominato in ui cioè in minuscolo invece che in UI , il che ha fatto andare subito la mia guerra.

Grazie.

Se lo vedi in Visual Studio Code e Gitbash, vai alle impostazioni e cerca C: \ (maiuscolo C) e cambia il percorso di Gitbash.exe in c: \ e scomparirà.

Nel mio caso (Win7, VSCode, Angular 6) il problema persiste anche dopo aver corretto ovunque il percorso errato. Sembra che in qualche modo il webpack memorizzi il percorso nella cache, quindi per risolverlo:

• Rinomina la cartella o il file che causa problemi in qualcosa di diverso
• Costruire
• Errore
• Rinomina di nuovo
• Costruire
• Successo

Anch'io ho avuto lo stesso problema. Ero passato a una directory Trade_v3, mentre la directory effettiva era Trade_V3. Dopo aver cambiato la directory, questo errore non ha generato.

Anche il caso della lettera drive è importante. Nel mio caso, Windows 10 aveva la "C" maiuscola mentre io avevo la "c" minuscola nel file.

Ho affrontato lo stesso problema in Vue.js . Alla fine si è scoperto che ho importato un componente in due posti con spazi dei nomi diversi.

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

import Step1 from './Step1'

Risolto il problema cambiando il secondo in:

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

Si spera che aiuti alcuni di voi ...

Lo stesso problema è accaduto a me, perché ho cambiato il nome della cartella del mio progetto in "Myclass", e in git bash era "myclass" per qualche motivo. Quando sono passato alla "m" inferiore, il messaggio si è interrotto.

Nessuna di queste soluzioni ha funzionato per me. Quello che ha fatto è stato:

• Elimina i file problematici (ma fai un backup da qualche altra parte!).
• Applica la modifica a Git.
• Aggiungi di nuovo gli stessi file dal backup.
• Salva i nuovi file su Git ... problema risolto!

Nel mio caso avevo semplicemente cambiato le maiuscole dei nomi dei file contenenti i moduli importati. Si presentavano come minuscole nel file system (OSX Finder, Bash) e nell'editor del codice (VS Code). Tuttavia, l'apertura dei file nel codice VS mi mostrava ancora il vecchio nome del file nella scheda dell'editor del codice. Ho provato a eliminare completamente i file e quindi ad aggiungerli di nuovo. Questo non ha funzionato: i file appena aggiunti mostravano ancora i vecchi nomi nelle schede dell'editor e le mie build erano ancora in errore.

Quindi, dopo alcune ore di inutili tentativi di correzione, ho scoperto che Git non considera le modifiche alle maiuscole dei file come modifiche, quindi non ha mai effettivamente modificato quei nomi di file:

Come faccio a eseguire il commit delle modifiche al nome dei file solo con distinzione tra maiuscole e minuscole in Git?

Quindi ho eliminato i file problematici, ho eseguito il commit su Git, li ho aggiunti di nuovo e reimpegnato - e ha funzionato. Nessun avviso e gli errori di compilazione sono scomparsi.

Se hai questo errore nel collegamento di next.js (in React):

import Link from 'next/Link'

INVECE DI

import Link from 'next/link'