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

紛らわしいのは、参照されている「2つの」ファイルが1つのファイルであるということです。ディレクトリには、大文字と小文字だけが異なる2つのファイルはありません。

また、これらの警告の影響を受ける場合、ホットリローダーがファイルへの変更を取得しないことがよくあることにも気づきました。

この問題の原因は何ですか？

Question 2

これは通常、ごくわずかなタイプミスの結果です。

たとえば、のようなモジュールをインポートする場合import Vue from 'vue'、import Vuex from 'vuex'。

ファイルを調べて、使用した場所を確認するfrom 'Vue'か、from 'Vuex'-あなたのimport文のようにまったく同じ大文字（大文字）を使用してください。

エラーの説明はもっと明確に書かれているはずですが、私が説明したことが、webpackコマンドでこのエラーが発生するたびに問題の原因になっています。

Question 3

この問題に直面し、運が悪かった提案された修正を試した他の人のために、ここに別の可能な解決策があります。

ターミナルで使用したパスの大文字が正しいことを確認してください。たとえば、Windowsでgit bashを使用していて、プロジェクトに次のパスがある場合：

C:\MyProjects\project-X

cd /c/myprojects/project-x（大文字のケースがないことに注意してください）を使用してアクセスしてから実行する場合npm startするこの問題が発生する可能性があります。

解決策は、プロジェクトパスで大文字と小文字を区別し、次のように使用することです。

cd /C/MyProjects/project-X

Question 4

それはAngular6で私に起こりました。それはあなたのideまたはテキストエディタが無視するかもしれない大文字と小文字の誤用エラーです。使用しました

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

そして今、VSCodeターミナルは正しいプロンプトパスを使用しています。

Question 6

私はAngular6プロジェクトでも同じ問題を抱えていました。

この問題は、次のようなモジュールにコンポーネントをインポートしているときに発生しました。

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

私が管理し-試験試験がであるように書かれている大文字と理解WebPACKの小さな文字を。

使ったらすぐ

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

小規模で試験を使用し、問題を解決しました。

Question 7

この問題はnpm start、ウィンドウマシンのvscodeターミナルで実行しようとすると発生します。そして問題がされた/desktop/flatsome代わりに/Desktop/flatsome、単に資本金はデスクトップへのパスを変更するD小文字とデスクトップの代わりにdあなたのvscode端子に

Question 8

私たちはWindowsでreactを実行し、私の開発者の1人がこれを見ましたが、他の誰も問題を抱えていませんでした。

私は彼らがプロジェクトのサブディレクトリに対してVSCodeを開くのを見て、次に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'

2つの方法で問題が解決することを願っています。

Question 10

VS Codeを使用していて、「npm run dev」を実行しているが、それぞれのプロジェクトフォルダーがVS Codeで開かれていない場合、これらの3つの警告が発生します。

したがって、解決策は次のとおりです。最初にそれぞれのプロジェクトフォルダーを開き、次に「npmrundev」のみを実行します。

Question 11

はい、これは、同じ名前を使用しているが大文字と小文字が変更されている場合に発生します。たとえば、

import React from 'React';

の代わりに：

import React from 'react';

Question 12

next.jsのリンク（Reactへ）にこのエラーがある場合：

import Link from 'next/Link'

の代わりに

import Link from 'next/link'

Question 13

この警告もありますが、私の問題は、たとえば、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 14

同様のエラーが発生しましたが、他の回答で説明されているものとまったく同じではありません。私の答えが誰かを助けることができることを願っています。

私は2つのコンポーネント（角度7プロジェクト）でファイルをインポートしていました：

コンポーネント1：

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

コンポーネント2：

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

これはばかげた間違いです。ここでの問題は、大文字が異なる同じファイルで2つの異なるrequiresを使用していることです（警告が生成されました）。

問題を解決する方法は？同じモデルを使用してください。

コンポーネント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 15

同様の問題ですが、私の問題はにインストールされてC:\Users\<username>\AppData\Local\Yarnいるパッケージでした。そのフォルダを削除し、必要なグローバルパッケージを再度追加すると、問題が修正されました。

Question 16

同じ問題が発生しました。reactフォルダーにUIという名前を付けました。た。reactたが、webpackによって生成されたパスがどういうわけか小文字になっています。

そのため、名前をuiに変更しました。つまり、UIではなく小文字に変更しました。これにより、すぐに戦争が始まりました。

ありがとう。

Question 17

Visual Studio CodeとGitbashでこれが表示されている場合は、設定に移動し、C：\（大文字のC）を検索して、Gitbash.exeのパスをc：\に変更すると、表示されなくなります。

Question 18

私の場合（Win7、VSCode、Angular 6）、どこでも間違ったケースパスを修正した後でも、問題は解決しません。webpackがパスをキャッシュしているように見えるので、それを解決するには：

問題の原因となるフォルダまたはファイルの名前を別の名前に変更します
ビルド
エラーが発生しました
名前を元に戻す
ビルド
成功

Question 19

私も同じ問題を抱えていました。実際のディレクトリはTrade_V3でしたが、私はディレクトリTrade_v3に移動しました。ディレクトリを変更した後、このエラーはスローされませんでした。

Question 20

レタードライブの場合も重要です。私の場合、ファイルには大文字の「C」が含まれていましたが、小文字の「c」が含まれていました。

Question 21

Vue.jsでも同じ問題に直面しました。最終的に、名前空間が異なる2つの場所にコンポーネントをインポートしたことが判明しました。

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

import Step1 from './Step1'

2番目のものを次のように変更して修正しました：

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

うまくいけば、それはあなたの何人かを助けるでしょう...

Question 22

プロジェクトフォルダの名前を「Myclass」に変更したため、同じ問題が発生しました。gitbashでは、何らかの理由で「myclass」でした。下の「m」に変更すると、メッセージが停止しました。

Question 23

これらの解決策はどれも私にはうまくいきませんでした。何がしたか：

問題のあるファイルを削除します（ただし、別の場所にバックアップしてください！）。
変更をGitにコミットします。
バックアップから同じファイルを再度追加します。
新しいファイルをGitにコミットします...問題は解決しました！

私の場合、インポートしたモジュールを含むファイル名の大文字を変更しただけです。これらは、ファイルシステム（OSX Finder、Bash）およびコードエディター（VS Code）では小文字で表示されていました。ただし、VSコードでファイルを開くと、コードエディタータブに古いファイル名が表示されたままでした。ファイルを完全に削除してから、再度追加してみました。これは機能しませんでした-新しく追加されたファイルはまだエディタータブに古い名前を表示していて、私のビルドはまだ壊れていました。

その後、数時間の無駄な修正を試みた後、Gitはファイルの大文字の変更を変更と見なさないため、実際にそれらのファイル名を変更することはありませんでした。

Gitで大文字と小文字を区別するファイル名の変更のみをコミットするにはどうすればよいですか？

そこで、問題のあるファイルを削除し、Gitにコミットし、それらを再度追加して、再コミットしました-そしてそれは機能しました。警告はなく、ビルドエラーは消えました。

Question 24

同じ問題が発生しましたが、vueファイルの名前がevent.vueのように小文字であることがわかりました。それを解決するために、名前をEvent.vueに変更し、インポート先を更新してから機能しました。importステートメントの場合、次のようになります。

前

'@ / components / NewsAndEvents / event'からイベントをインポートします。ファイルの名前を変更すると、次のようになります。

'@ / components / NewsAndEvents / Event'からイベントをインポートします