Webpack: «есть несколько модулей с именами, которые различаются только корпусом», но указанные модули идентичны

Я использую webpack 3.8.1 и получаю несколько экземпляров следующего предупреждения о сборке:

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

Что сбивает с толку, так это то, что упомянутые «два» файла - это всего лишь один файл - в каталоге нет двух файлов, имена которых отличаются только регистром.

Я также заметил, что мой горячий перезагрузчик часто не принимает изменения в файле, если на него влияют эти предупреждения.

Что могло вызвать эту проблему?

Обычно это результат небольшой опечатки.

Например, если вы импортировать модули , как import Vue from 'vue', import Vuex from 'vuex'.

Просмотрите свои файлы и проверьте, где вы использовали from 'Vue'или from 'Vuex'- убедитесь, что используете те же заглавные буквы (прописные буквы), что и в ваших операторах импорта.

Описания ошибок должны были быть написаны более четко, но то, что я объяснил, было причиной моей проблемы каждый раз для этой ошибки в командах webpack.

Для других, которые столкнулись с этой проблемой и безуспешно попробовали предложенные исправления, вот еще одно возможное решение.

Убедитесь, что путь, который вы использовали в своем терминале, имеет правильный регистр. Например, если вы используете git bash в Windows и ваш проект имеет следующий путь:

C:\MyProjects\project-X

Если вы получите доступ к нему с помощью cd /c/myprojects/project-x(обратите внимание на отсутствие заглавных букв), а затем запустите, npm startвы можете столкнуться с этой проблемой.

Решением было бы рассмотреть путь проекта с учетом регистра и использовать его следующим образом:

cd /C/MyProjects/project-X

Это случилось со мной на angular 6. Это ошибка неправильного использования заглавных и строчных букв, которую ваш ide или текстовый редактор может игнорировать. Я ИСПОЛЬЗОВАЛ

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

ВМЕСТО ТОГО

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

ПРЕДСТАВЛЯЙТЕ ТОЛЬКО "P" и "P". Удачи.

OMG, я наконец нашел решение своей проблемы.

Я использую терминал VS Code, и он использовал рабочий стол вместо рабочего стола в пути к приглашению:

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

Чтобы исправить это, мне просто пришлось закрыть папку проекта и снова открыть ее:

File -> Close Folder
File -> Open Folder

И теперь терминал VS Code использует правильный путь к подсказке.

У меня была такая же проблема в проекте angular 6.

Эта проблема возникла из-за того, что при импорте компонента в модуль, например

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

Я написал как Manage -Exam, где Exam заглавными буквами, а webpack понимает маленькие буквы .

Как только я использовал

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

использовал экзамен в малом и проблема решена.

эта проблема возникает у меня, когда я пытаюсь запустить npm start терминал vscode на оконной машине. и проблема заключалась в том, что /desktop/flatsomeвместо этого /Desktop/flatsomeпросто измените путь к рабочему столу с заглавной буквы Dвместо рабочего стола со строчными буквами dв вашем терминале vscode

Мы запускаем реакцию в Windows, и один из моих разработчиков заметил это, но ни у кого не было проблемы.

Я наблюдал, как они открывают VS Code в подкаталог проекта, затем сделал cd в каталог проекта строчные буквы (вместо фактического смешанного регистра), а затем запускают npm start.

На самом деле вы могли видеть имя каталога в нижнем регистре в терминале как c:\someproject\somedir это есть в проводнике Windows c:\SomeProject\SomeDir.

Я был удивлен, что командный терминал Windows позволяет это делать.

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

Надеюсь, эти два способа решат вашу проблему。

Если вы используете VS Code и выполняете « npm run dev », но соответствующая папка проекта не открывается в VS Code, то появятся эти 3 предупреждения .

Итак, решение: сначала откройте соответствующую папку проекта, затем выполните только "npm run dev"

Да, это происходит, если вы использовали то же имя, но с измененным регистром: например, вы использовали

import React from 'React';

Вместо того:

import React from 'react';

У меня тоже есть это предупреждение, но моя проблема в том, что, например, есть файловый каталог проекта React:

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

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

И будет подобное предупреждение. Потому что вам лучше не использовать одно и то же имя файла (например, action.jsв этих папках) за исключением index.js, иначе это может привести к неожиданному поведению при компиляции в файловой системе с другой семантикой регистра.

Чтобы устранить это предупреждение, мы могли бы сделать это:

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

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

Это мой опыт, надеюсь, он кому-то поможет.

У меня была аналогичная ошибка, но не такая, как описано в других ответах. Надеюсь, мой ответ может кому-то помочь.

Я импортировал файл из двух компонентов (проект angular 7):

Компонент 1:

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

Компонент 2:

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

Это глупая ошибка: проблема в том, что я использую два разных требования в одном файле с разными заглавными буквами (это генерировало предупреждение).

Как решить проблему ? Используйте ту же модель.

Компонент 1:

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

Компонент 2:

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

ИЛИ

Компонент 1:

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

Компонент 2:

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

Аналогичная проблема, но моя проблема заключалась в установке пакетов в C:\Users\<username>\AppData\Local\Yarn. Удаление этой папки и повторное добавление глобальных пакетов решило проблему.

У меня была такая же проблема, я назвал свою папку реакции как пользовательский интерфейс а путь, который был создан веб-пакетом, каким-то образом указывал в нижнем регистре.

Итак, я переименовал его в ui, то есть в нижнем регистре вместо UI , что сразу заставило мою борьбу уйти.

Спасибо.

Если вы видите это в Visual Studio Code и Gitbash, перейдите в настройки, найдите C: \ (верхний регистр C) и измените путь для Gitbash.exe на c: \, и он исчезнет.

В моем случае (Win7, VSCode, Angular 6) проблема сохраняется даже после того, как я везде исправил неправильный путь к регистру. Похоже, что webpack каким-то образом кеширует путь, поэтому для его решения:

• Переименуйте папку или файл, вызывающие проблемы, на что-нибудь другое
• Построить
• Есть ошибка
• Переименовать обратно
• Построить
• Успех

У меня тоже была такая же проблема. Я перешел в каталог Trade_v3, тогда как фактический каталог был Trade_V3. После смены каталога эту ошибку не выкидывал.

Также имеет значение регистр буквенного диска. В моем случае в Windows 10 была заглавная буква «C», а в файле - строчная буква «c».

Я столкнулся с той же проблемой в Vue.js . В конце концов оказалось, что я импортировал компонент в два места с разными пространствами имен.

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

import Step1 from './Step1'

Исправлено, изменив второй на:

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

Надеюсь, это поможет некоторым из вас ...

Та же проблема случилась со мной, потому что я изменил имя папки моего проекта на «Myclass», а в git bash по какой-то причине это было «myclass». Когда я перешел на более низкое «м», сообщение прекратилось.

Ни одно из этих решений не помогло мне. Что сделал:

• Удалите проблемные файлы (но сделайте их резервную копию в другом месте!).
• Зафиксируйте изменение в Git.
• Снова добавьте те же файлы из резервной копии.
• Зафиксируйте новые файлы в Git ... проблема решена!

В моем случае я просто изменил регистр букв в именах файлов, содержащих импортированные модули. Они отображались строчными буквами в файловой системе (OSX Finder, Bash) и в редакторе кода (VS Code). Однако открытие файлов в коде VS все еще показывало мне старое имя файла на вкладке редактора кода. Я попытался полностью удалить файлы, а затем снова добавить их. Это не сработало - недавно добавленные файлы все еще отображали старые имена на вкладках редактора, а мои сборки все еще ломались.

Затем, после нескольких часов тщетных попыток исправления, я обнаружил, что Git не рассматривает изменения в регистре букв как изменения, поэтому он никогда не менял эти имена файлов:

Как зафиксировать в Git изменения имени файла с учетом регистра только с учетом регистра?

Поэтому я удалил проблемные файлы, зафиксировал их в Git, повторно добавил их и повторно зафиксировал - и это сработало. Никаких предупреждений и ошибки сборки исчезли.

Если у вас есть эта ошибка в ссылке на next.js (в React):

import Link from 'next/Link'

ВМЕСТО ТОГО

import Link from 'next/link'