Webpack: «є кілька модулів з іменами, які відрізняються лише кожухом», але модулі, на які посилаються, однакові

Question 1

Я використовую 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

Що бентежить, так це те, що на "два" файли, на які посилаються, є лише один файл - у каталозі немає двох файлів, імена яких відрізняються лише у випадку.

Я також помітив, що мій гарячий перезавантажувач часто не збирає зміни у файлі, якщо на нього впливають ці попередження.

Що може спричинити цю проблему?

Question 2

Зазвичай це результат незначної друкарської помилки.

Наприклад, якщо ви імпортувати модулі , як import Vue from 'vue', import Vuex from 'vuex'.

Перегляньте свої файли та перевірте, де ви використовували, from 'Vue'або from 'Vuex'- обов’язково використовуйте ті самі великі літери (великі літери), що і в операторах імпорту.

Описи помилок мали бути написані чіткіше, але те, що я пояснив, було причиною моєї проблеми кожного разу для цієї помилки в командах webpack.

Question 3

Для інших, хто стикається з цією проблемою і намагався запропонувати виправлення без удачі, ось інше можливе рішення.

Переконайтеся, що шлях, який ви використовували у своєму терміналі, має правильне написання великих літер. Наприклад, якщо ви використовуєте git bash у Windows, а ваш проект має такий шлях:

C:\MyProjects\project-X

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

Рішенням було б врахувати регістр шляху проекту та використовувати його наступним чином:

cd /C/MyProjects/project-X

Question 4

Це трапилося зі мною на кутовому 6. Це помилка неправильного використання великої та маленької літери, яку ваш проект або текстовий редактор можуть ігнорувати. Я ВИКОРИСТАВ

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

ЗАМІСТЬ

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

УЯВІТЬ ПРОСТО "P" та "p". Удачі.

Question 5

OMG Я нарешті знайшов рішення своєї проблеми.

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

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

Щоб це виправити, мені просто довелося закрити папку проекту та відкрити її знову:

File -> Close Folder
File -> Open Folder

І зараз термінал VS Code використовує правильний підказковий шлях.

Question 6

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

Ця проблема сталася через те, що під час імпорту компонента в модулі, як

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

Я писав як іспит з управління, де іспит написано з великої літери, а веб-пакет розуміє малу літеру .

Як тільки я використав

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

використаний іспит у малому та вирішення проблеми

Question 7

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

Question 8

Ми запускаємо реакцію на Windows, і один із моїх розробників це бачив, але ні в кого іншого не було проблеми.

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

Насправді ви могли бачити назву каталогу в нижньому регістрі в терміналі, як, c:\someproject\somedirале в Провіднику Windows це так c:\SomeProject\SomeDir.

Я був здивований, що командний термінал Windows дозволяє це зробити.

Question 9

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

Сподіваюся, два шляхи вирішать вашу проблему。

Question 10

Якщо ви використовуєте код VS і ви робите " npm run dev ", але ця відповідна папка проекту не відкрита у VS Code, тоді відбудуться ці 3 попередження .

Тож рішення: спочатку відкрийте відповідну папку проекту, а потім виконайте лише "npm run dev"

Question 11

Так, це трапляється, якщо ви використовуєте те саме ім'я, але зі зміною регістру: наприклад, ви використовували

import React from 'React';

Замість:

import React from 'react';

Question 12

У мене також є це попередження, але моя проблема полягає в тому, що, наприклад, є каталог файлів проекту 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

Це мій досвід, сподіваюся, це могло комусь допомогти.

Question 13

У мене була подібна помилка, але не зовсім така, як описано в інших відповідях. Сподіваюсь, моя відповідь може комусь допомогти.

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

Question 14

Подібна проблема, але моєю проблемою були пакети, встановлені в C:\Users\<username>\AppData\Local\Yarn. Видалення цієї папки та повторне додавання загальних пакетів, які я хотів, вирішили проблему.

Question 15

У мене була та ж проблема, я назвав свою папку реакцій як UI, і шлях, який генерував webpack, якимось чином робив її в нижньому регістрі.

Отже, я перейменував його на ui, тобто в нижній регістр замість UI , що змусило мою війну піти відразу.

Дякую.

Question 16

Якщо ви бачите це в Visual Studio Code та Gitbash, перейдіть до налаштувань і знайдіть C: \ (верхній регістр C) і змініть шлях для Gitbash.exe на c: \ і він зникне.

Question 17

У моєму випадку (Win7, VSCode, Angular 6) проблема зберігається навіть після того, як я скрізь виправив неправильний шлях справи. Схоже, веб-пакет якось кешує шлях, тому для його вирішення:

Перейменуйте папку або файл, що спричиняє проблеми, на щось інше
Збірка
Отримала помилку
Перейменувати назад
Збірка
Успіху

Question 18

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

Question 19

Справа буквеного приводу також має значення. У моєму випадку у Windows 10 була велика літера „C”, тоді як у мене у файлі мала „c”.

Question 20

Я зіткнувся з тією ж проблемою в Vue.js . Зрештою виявилося, що я імпортував компонент у двох місцях з різними просторами імен.

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

import Step1 from './Step1'

Виправлено, змінивши другий на:

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

Сподіваюся, це допоможе комусь із вас ...

Question 21

Та сама проблема трапилася і зі мною, тому що я змінив назву папки свого проекту на "Myclass", а в git bash це було чомусь "myclass". Коли я змінив значення "m", повідомлення зупинилося.

Question 22

Жодне з цих рішень не працювало для мене. Що було:

Видаліть проблемні файли (але зробіть їх резервну копію в іншому місці!).
Запишіть зміни до Git.
Додайте ті самі файли ще раз із резервної копії.
Запишіть нові файли до Git ... проблема вирішена!

У моєму випадку я просто змінив великі літери своїх імен файлів, що містять імпортовані модулі. Вони відображались як малі регістри у файловій системі (OSX Finder, Bash) та в редакторі коду (VS Code). Однак відкриття файлів у коді VS все ще показувало мені старе ім'я файлу на вкладці редактора коду. Я спробував повністю видалити файли, а потім повторно додати їх. Це не спрацювало - нещодавно додані файли все ще відображали старі імена на вкладках редактора, а мої збірки все ще ламались.

Потім, через кілька годин марних спроб виправити, я виявив, що Git не сприймає зміни до використання великих літер файлів як зміни, тому фактично ніколи не змінював ці імена файлів:

Як здійснити зміни в Git, що враховують лише регістр, у Git?

Тож я видалив проблемні файли, зафіксував Git, повторно додав їх і знову зафіксував - і це спрацювало. Жодних попереджень та помилок збірки не зникло.

Question 23

Якщо у вас є ця помилка у посиланні next.js (у React):

import Link from 'next/Link'

ЗАМІСТЬ

import Link from 'next/link'