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

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

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

Что может быть причиной этой проблемы?

Ответ 1

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

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

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

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

Ответ 2

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

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

C:\MyProjects\project-X

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

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

cd /C/MyProjects/project-X

Ответ 3

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

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

ВМЕСТО

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

Представьте себе просто "P" и "p". Удачи.

Ответ 4

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

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

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

Я написал как управляющий экзамен, где экзамен прописной буквой, а веб-пакет понимает маленькую букву.

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

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

Используется экзамен в малых и проблема решена.

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

У меня также есть это предупреждение, но моя проблема в том, что, например, есть каталог файлов проекта 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

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

Ответ 8

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

Я импортировал файл в двух компонентах (проект 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");

Ответ 9

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

Ответ 10

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

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

Благодарю.

Ответ 11

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

Ответ 12

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

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

Ответ 13

В моем проекте Gatsby проблема была в том, что я изменил layout.js на Layout.js, так как я имел обыкновение менять все имена компонентов, начиная с Capital. Я думаю, вы должны быть осторожны, когда вы меняете имя файла в Гэтсби!

Ответ 14

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

Ответ 15

Случай буквы диска тоже имеет значение. В моем случае Windows 10 имела прописную букву "C", а у меня строчную букву "c" в файле.

Ответ 16

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

import React from 'React'

Ответ 17

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

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

Ответ 18

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

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

import Step1 from './Step1'

Исправлено путем изменения второго на:

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

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

Ответ 19

Я на машине с Windows, и у меня тоже есть эта проблема. Webpack предупреждает о несоответствиях в заглавных буквах пути. Это проблема кода VS, при которой, когда терминал вызывается программно, код VS использует букву диска в нижнем регистре. Для меня не имеет значения, какой терминал, это всегда будет строчный c :. Чтобы исправить это, я добавил команду shell в мои скрипты npm для веб-пакетов, чтобы прописная буква диска была выполнена перед выполнением основной команды. Я не писал команды оболочки, я нашел их в связанных постах, но это работает. Команда оболочки в верхнем регистре путь:

cd.. && cd C%cd:~1%

Поместите его вместе со своими скриптами npm, и вы получите:

"watch": "cd.. && cd C%cd:~1%&&webpack --config./webpack.dev.config.js",

или же

"build": "cd.. && cd C%cd:~1%&&webpack --config./webpack.prod.config.js",

Затем, когда вы запускаете npm run watch или npm run build он прописывает путь для вас, а затем переходит к веб-пакету.

Обратите внимание, что это не решит никаких законных проблем с капитализацией, которые могут возникнуть. Вам все равно придется проверять свой код вручную на наличие таких утверждений, как: import Vue from 'vue' и правильно использовать их заглавные буквы, например: import Vue from 'Vue', в зависимости от того, что диктуется прописной буквой в файлах библиотеки.

Ответ 20

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

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

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

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

File -> Close Folder
File -> Open Folder

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