web-dev-qa-db-ja.com

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

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

また、これらの警告の影響を受けている場合、ホットリローダーがファイルへの変更を認識しないことがよくあります。

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

webpackwebpack-hot-middleware
44
tcelferact

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

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

ファイルを調べて、from 'Vue'またはfrom 'Vuex'を使用した場所を確認します。インポートステートメントと同じ大文字（大文字）を使用してください。

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

77
matthiku

この問題に直面していて、幸運なしに提案された修正を試みた他の人のために、ここに別の可能な修正があります。

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

C:\MyProjects\project-X

cd /c/myprojects/project-x（大文字のケースがないことに注意）を使用してアクセスし、npm startを実行すると、この問題に直面する可能性があります。

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

cd /C/MyProjects/project-X

20
Dimitar Dimitrov

それはangular 6で私に起こりました。これは大文字と小文字の誤用エラーであり、IDEまたはテキストエディターが無視する可能性があります。私は使いました

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

の代わりに

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

IMAGINE JUST "P"および "p"。幸運を。

8
lilhamad

Windowsでリアクションを実行し、私の開発者の1人がこれを見ましたが、他の誰も問題を抱えていませんでした。

私は彼らがプロジェクトのサブディレクトリにVS Codeを開き、プロジェクトディレクトリにcdを実行し、小文字で（実際の大/小文字混合ではなく）し、npm startを実行しました。

実際には、ターミナルでは小文字のディレクトリ名がc:\someproject\somedirとして表示されますが、Windowsエクスプローラーではc:\SomeProject\SomeDirです。

Windowsコマンドターミナルでこれができることに驚いた。

1
Simon Hutchison

angular 6プロジェクトでも同じ問題が発生しました。

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

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

capital letterであり、webpackがsmall letterを理解している場合、manage-Examのように書きました。

使ったらすぐに

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

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

1
Shashikant Pandit

VS Codeを使用している場合、 "npm run dev"を実行しているが、それぞれのプロジェクトフォルダーis n't open VS Codeでは、これらの3警告が発生します。

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

1
Shashank Shekhar Barik

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

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

import Step1 from './Step1'

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

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

うまくいけば、それはあなたの一部を助ける...

0
Sandip Mane

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

0
Josh G

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

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

私は同じ問題を抱えていました。反応フォルダにUIという名前を付け、webpackによって生成されたパスはどうにかして小文字にする。

そのため、名前をuiに変更しました-の代わりに小文字で_ ui _.

ありがとう。

0
Rishabh Jain

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

import React from 'React'
import React from 'react'
0
Jitendra Pal - JP
// 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つの方法で問題が解決することを願っています。

0
Qian

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

0
icernos

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

0
httpete

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

0
Raja Sekar

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

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

コンポーネント1：

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

コンポーネント2：

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

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

問題の解決方法同じモデルを使用します。

コンポーネント1：

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

コンポーネント2：

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

OR

コンポーネント1：

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

コンポーネント2：

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

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

これは私の経験です。誰かの助けになることを願っています。

0
aermin