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

令人困惑的是，被引用的“两个”文件只是一个文件，目录中没有两个文件，只是大小写不同。

我还注意到，如果受这些警告的影响，我的热重新加载器通常不会拾取对文件的更改。

是什么导致此问题？

这通常是微小错误的结果。

举例来说，如果要导入的模块，如import Vue from 'vue'，import Vuex from 'vuex'。

浏览文件，检查使用的位置from 'Vue'或from 'Vuex'-确保使用与导入语句中完全相同的大写字母（大写字母）。

错误的说明应该写得更清楚，但是我每次在webpack命令上出现此错误时，引起的问题都是我解释的。

对于其他面临此问题并没有运气尝试建议的修复方法的人，这是另一种可能的解决方案。

确保您在终端中使用的路径具有正确的大小写。例如，如果您在Windows上使用git bash，并且您的项目具有以下路径：

C:\MyProjects\project-X

如果使用cd /c/myprojects/project-x（请注意缺少大写字母）访问它然后运行，则npm start可能会遇到此问题。

解决方案是考虑项目路径区分大小写，并按以下方式使用它：

cd /C/MyProjects/project-X

它在角度6发生在我身上。这是大写和小写字母误用错误，您的IDE或文本编辑器可能会忽略。我用了

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

代替

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

想象一下“ P”和“ p”。祝好运。

天哪，我终于找到了解决我的问题的方法。

我正在使用VS Code Terminal，并且在提示的路径中使用的是台式机而不是台式机：

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

要修复它，我只需要关闭项目文件夹并重新打开它：

File -> Close Folder
File -> Open Folder

现在，VS Code终端正在使用正确的提示路径。

我在angular 6项目中遇到了同样的问题。

发生此问题的原因是，在模块中导入组件时

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

我写过像manage-Exam一样的考试，考试用大写字母表示，而webpack理解小写字母。

我一经使用

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

使用过的小考试并已解决。

当我尝试npm start在窗口计算机上的vscode终端中运行时，此问题发生在我身上。而问题是/desktop/flatsome，而不是/Desktop/flatsome仅仅将路径更改为桌面用资本D代替台式机用小写d在vscode终端

我们在Windows上运行React，我的一位开发人员看到了这一点，但没有其他人遇到这个问题。

我看着他们打开VS Code到项目的子目录，然后cd对项目目录使用小写字母（而不是实际的大小写），然后运行npm start。

您实际上可以在终端中以小写形式看到目录名称，c:\someproject\somedir但在Windows资源管理器中却是c:\SomeProject\SomeDir。

我很惊讶Windows命令终端允许您执行此操作。

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

希望两种方法都能解决您的问题。

如果您使用的是VS Code，并且您正在执行“ npm run dev ”，但未在VS Code中打开相应的项目文件夹，则将发生这3条警告。

因此，解决方案是：首先打开相应的项目文件夹，然后仅执行“ npm run dev”

是的，如果您使用了相同的名称但大小写已更改，则会发生这种情况：例如，您使用了

import React from 'React';

代替：

import React from 'react';

我也有这个警告，但是我的问题是，例如，有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

这是我的经验，希望能对某人有所帮助。

我有类似的错误，但与其他答案所描述的不完全相同。希望我的回答可以对某人有所帮助。

我正在导入两个组件的文件（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");

类似的问题，但是我的问题是在中安装了软件包C:\Users\<username>\AppData\Local\Yarn。删除该文件夹并重新添加全局软件包，我想解决此问题。

我遇到了同样的问题，我将我的react文件夹命名为UI并且webpack生成的路径以某种方式使其变为小写。

因此，我将其重命名为ui，即小写而不是UI，这使我的交往立即进行。

谢谢。

如果在Visual Studio Code和Gitbash中看到此消息，请转到设置，然后搜索C：\（大写C）并将Gitbash.exe的路径更改为c：\，它将消失。

就我的情况（Win7，VSCode，Angular 6）而言，即使在所有地方都修复了错误的情况路径后，问题仍然存在。看起来像webpack以某种方式缓存路径，因此要解决它：

• 重命名导致问题的文件夹或文件不同
• 建立
• 有错误
• 重命名
• 建立
• 成功

我也有同样的问题。我导航到目录Trade_v3，而实际目录为Trade_V3。更改目录后，未引发此错误。

字母驱动器的大小写也很重要。就我而言，Windows 10在文件中具有大写字母“ C”，而我具有小写字母“ c”。

我在Vue.js中遇到了同样的问题。最终事实证明，我在两个位置导入了具有不同名称空间的组件。

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

import Step1 from './Step1'

通过将第二个更改为：

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

希望它能对您有所帮助...

我遇到了同样的问题，因为我将项目文件夹的名称更改为“ Myclass”，而由于某些原因，在git bash中将其命名为“ myclass”。当我更改为较低的“ m”时，消息停止了。

这些解决方案都不适合我。那是什么：

• 删除有问题的文件（但在其他地方进行备份！）。
• 将更改提交给Git。
• 从备份中再次添加相同的文件。
• 将新文件提交到Git ...问题已解决！

就我而言，我只是简单地更改了包含导入模块的文件名的大小写。它们在文件系统（OSX Finder，Bash）和代码编辑器（VS Code）中显示为小写。但是，以VS代码打开文件仍然在代码编辑器选项卡中显示了旧文件名。我尝试完全删除文件，然后重新添加它们。这不起作用-新添加的文件仍在编辑器选项卡中显示旧名称，而我的构建仍在中断。

然后，经过数小时徒劳的修复尝试，我发现Git不会将对文件大小写的更改视为更改，因此它实际上从未更改过这些文件名：

如何在Git中提交仅区分大小写的文件名更改？

因此，我删除了有问题的文件，提交给Git，重新添加了文件并重新提交了-并且它起作用了。没有警告，并且构建错误消失了。

如果您在next.js的链接（进入React）中有此错误：

import Link from 'next/Link'

代替

import Link from 'next/link'