webpack - hot - Paquete web: "hay varios módulos con nombres que solo difieren en la carcasa", pero los módulos a los que se hace referencia son idénticos

webpack-dev-middleware npm

Question

Estoy usando webpack 3.8.1 y estoy recibiendo varias instancias de la siguiente advertencia de compilación:

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

Lo que es confuso es que los ''dos'' archivos a los que se hace referencia son solo un archivo: no hay dos archivos en el directorio cuyos nombres solo difieran en el caso.

También he notado que mi recargador caliente a menudo no recoge los cambios en un archivo si se ve afectado por estas advertencias.

¿Qué podría estar causando este problema?

Answer 1

En mi caso (Win7, VSCode, Angular 6), el problema persiste incluso después de haber corregido la ruta incorrecta del caso en todas partes. Parece que el webpack guarda el camino de alguna manera, así que para resolverlo:

• Renombrar carpeta o archivo que cause problemas a algo diferente.
• Construir
• Tiene error
• Renombrar de nuevo
• Construir
• Éxito

Answer 2

Esto suele ser el resultado de un error tipográfico minúsculo.

Si está importando sus módulos como import Vue from ''vue'' , import Vuex from ''vuex'' .

Revise sus archivos y verifique dónde los usó from ''Vue'' o from ''Vuex''

Las descripciones de los errores deberían haberse escrito más claramente, pero lo que expliqué ha sido la causa de mi problema cada vez que se produce este error en los comandos de webpack.

Answer 3

Me pasó a mí en angular 6. Es un error de uso indebido de mayúsculas y minúsculas que su ide o editor de texto puede ignorar. SOLÍA

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

EN LUGAR DE

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

IMAGINE SOLO "P" y "p". Buena suerte.

Answer 4

Para otros que enfrentan este problema y probaron las correcciones sugeridas sin suerte, aquí hay otra solución posible.

Asegúrese de que la ruta que utilizó en su terminal tenga el uso de mayúsculas correcto. Por ejemplo, si está utilizando git bash en Windows y su proyecto tiene la siguiente ruta:

C:/MyProjects/project-X

Si accede a él utilizando cd /c/myprojects/project-x (tenga en cuenta la falta de mayúsculas) y luego ejecute npm start puede enfrentar este problema.

La solución sería considerar que la ruta del proyecto distingue entre mayúsculas y minúsculas y usarla de la siguiente manera:

cd /C/MyProjects/project-X

Answer 5

Problema similar, pero mi problema fue que los paquetes se instalaron en C:/Users/<username>/AppData/Local/Yarn . Eliminar esa carpeta y volver a agregar los paquetes globales que deseaba solucionó el problema.

Answer 6

Si está viendo esto en Visual Studio Code y Gitbash, vaya a la configuración, busque C: / (mayúscula C) y cambie la ruta de acceso de Gitbash.exe a c: / y desaparecerá.

Answer 7

También tengo esta advertencia, pero mi problema es que, por ejemplo, está el directorio de archivos del proyecto React:

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

Y habrá una advertencia similar. Debido a que es mejor que no use el mismo nombre de archivo (como action.js en esas carpetas) excluyendo index.js , de lo contrario, esto puede provocar un comportamiento inesperado al compilar un sistema de archivos con otro caso semántico.

Para resolver esta advertencia, podríamos hacer eso:

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

Esta es mi experiencia, espero que pueda ayudar a alguien.

Answer 8

Tuve el mismo problema en el proyecto angular 6.

Este problema se produjo porque al importar componentes en el módulo como

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

He escrito como manage-Exam donde Exam está en mayúscula y el paquete web comprende minúscula .

Tan pronto como lo use

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

Examen utilizado en pequeño y problema resuelto.

Answer 9

Tuve el mismo problema, nombré a mi carpeta de reacción como IU y la ruta generada por el webpack de alguna manera lo estaba haciendo en minúsculas.

Entonces, le cambié el nombre a ui, es decir, en minúsculas en lugar de UI , lo que hizo que mi guerra se pusiera en marcha de inmediato.

Gracias.

Answer 10

Tuve un error similar pero no exactamente el mismo descrito por otras respuestas. Espero que mi respuesta pueda ayudar a alguien.

Estaba importando un archivo en dos componentes (proyecto angular 7):

Componente 1:

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

Componente 2:

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

Este es un error tonto: el problema aquí es que estoy usando dos requisitos diferentes en el mismo archivo con letras mayúsculas diferentes (generó una advertencia).

Como resolver el problema ? Usa el mismo modelo.

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");