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 использует правильный путь подсказки.