Webpack："存在多个模块具有仅在大小写上不同的名称，但所引用的模块是相同的"

Question

我正在使用 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

令人困惑的是，“两个”被引用的文件实际上只有一个文件 - 在目录中没有两个名称仅在大小写上不同的文件。

我还注意到，如果文件受这些警告影响，则我的热重新加载器经常无法捕获对文件的更改。

可能是什么原因导致了这个问题？

- achalk

---

看看这个，它可能会解决你的问题 https://dev59.com/7broa4cB1Zd3GeqPfjJV - Sarthak Saklecha

Answer 1

这通常是由于微小的拼写错误造成的，比如错误地使用大写字母或小写字母作为首字母，而实际需要的是相反的情况。

例如，如果您像这样导入模块：

import Vue from 'vue'

或者：

import Vuex from 'vuex'

浏览您的文件，并检查是否使用了诸如 from 'Vue' 或 from 'Vuex' 的短语，并确保与导入语句中的大写字母完全相同。

背景:

该错误基本上表示我们的代码中存在多个模块名称相似但大小写不同的模块，这似乎表明在您引用“导入”模块时，但未使用正确的大小写时，Vue 将尝试创建另一个具有前述名称差异的模块，但两者都指向同一模块引用。因此 Vue 可以通过忽略代码中模块引用名称的大小写来更具弹性。

我解释的内容已经是我在webpack命令出现此错误时每次遇到问题的原因。

- matthiku

---

没错，是路径名有误而非模块名，这让我产生了困惑。我的路径名是NavBar/MainMenuItemMobile.js——Navbar中的'b'应该是小写的。 - achalk

没错，我的情况是使用了React，当我导入时出现了错误：import React, { Component } from 'React'; 修复方法就是改为 from 'react'。 - rflmyk

我的问题是，在一个组件中我引用了 components/vue.js，而在另一个组件中我引用了 components/Vue.js。 - Dennis

只是想补充一下 - 当我遇到这个错误时，是因为我的GitBash路径中有一个小写的users，而Webpack期望的是一个大写的Users。 - sleepy_daze

对于仍然遇到此问题的人们——关于它如何发生的提示——如果您使用Visual Studio Code并且使用QuickFix功能添加了组件或模块，那么这可能是大小写出错的原因——显然，VSCode不会在大小写敏感的操作系统（对我来说是Mac）上保留原始路径/文件的大小写。 - huygir

Answer 2

对于其他遇到此问题并尝试了建议修复方法但没有成功的人，这里有另一个可能的解决方案。

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

C:\MyProjects\project-X

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

解决方案是将项目路径视为区分大小写，并按如下方式使用它：

cd /C/MyProjects/project-X

- Dimitar Dimitrov

---

哇...你刚刚帮了我一个大忙！我主要在Windows上使用Git bash。我大小写弄错了，一旦我改正了它，它就起作用了。值得注意的是，在Powershell中不正确的大小写不会导致相同的错误，看起来路径在幕后被转换为适当的大小写。 - Ryan Eastabrook

我曾遇到过完全相同的问题。然而，由于我在不同的时间使用了不同大小写的路径安装不同的包，导致我的 node_modules 文件夹出了问题。我彻底删除了它，重新运行了 npm install，所有警告都消失了。 - Nate

是的。在控制台中，我已经“cd”到了具有package.json文件的文件夹中。为了到达那里，我键入了“cd clientapp”。名称的真实大小写是ClientApp。警告文本显示的路径包括ClientApp作为路径的一部分，“帮助”指出我选择了一个路径，其中包括“clientapp”。将其归档为“您可以完全忽略此警告”。 - StackOverflowUser

我也遇到了完全相同的问题，在创建一个新的NextJS项目后，所以我知道一定是我做错了什么。 - Greg M.

我觉得你可能是保加利亚人，就像我一样。不管怎样，你的帮助真的很有用，因为我在我的Windows电脑上运行Next.js 14项目时遇到了一些问题。我遇到了几个在我的MacBook上没有发生的问题。项目一直显示一个"Hydration"错误。这是因为我在终端中使用驼峰命名法在路径字符串中的方式。 - undefined

Answer 3

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

我正在使用VS Code 终端，但提示符路径中使用的是desktop而不是Desktop：

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

为了解决这个问题，我只需关闭项目文件夹并重新打开它：

File -> Close Folder
File -> Open Folder

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

- felipe

---

这解决了我的问题，谢谢。 - Derrick.X

非常感谢。在我将“Hello-World”文件夹重命名为“hello-world”后，这里出现了完全相同的问题，而VS Code内部仍在使用“Hello-World”。 - ShadowGames

解决了我的问题。谢谢！ - smcg

Answer 4

这在我的Angular 6上发生过。 这是一个大小写用法错误，你的IDE或文本编辑器可能会忽略它。 我使用了

。

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

改为

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

想象一下只有大写字母"P"和小写字母"p"的情况。祝你好运。

- Ahmed Adewale

---

对我来说，在Windows 10上是 datatables.net-fixedheader（正确）而不是 DataTables.net-fixedheader（错误）。 - Jonas Gröger

Answer 5

如果您在React中的Next.js链接中遇到此错误：

import Link from 'next/Link'

替代

import Link from 'next/link'

- Mohammad Fallah

---

这个把我打垮了。谢谢！ - barrylachapelle

Answer 6

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

我看到他们在VS Code中打开了项目的子目录，然后使用小写字母（而不是实际的混合大小写）更改目录到项目目录，然后运行npm start。

你实际上可以在终端中以小写字母的形式看到目录名：c:\someproject\somedir，但在Windows资源管理器中它是c:\SomeProject\SomeDir。

我很惊讶Windows命令终端竟然允许您这样做。

- Simon Hutchison

---

这是因为Windows文件系统在过去/现在不区分大小写。 （因为在Windows 10中，您可以将其设置为区分大小写，我知道） - Cody Ｇ

Answer 7

我遇到的问题（在next.js上）是将目录名称更改为小写解决了它：

从： /src/Components/NavBar/MainMenuItemMobile.js。

到： /src/components/navBar/MainMenuItemMobile.js。

- Shawn Jewel

Answer 8

在我做的Angular 6项目中出现了相同的问题。

这个问题发生在导入组件到模块时，比如：

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

我已经写了一个名为manage-Exam的程序，其中Exam以大写字母命名，但webpack只能识别小写字母。

当我使用这个程序时，

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

使用小型考试，问题已解决。

- Shashikant Pandit

Answer 9

如果您使用了相同名称但大小写不同，就会发生这种情况。 例如，您已经使用了

import React from 'React';

改为：

import React from 'react';

- Jitendra Pal - JP

Answer 10

在Windows机器上，当我尝试在VS Code终端中运行npm start时，出现了这个问题。问题出在路径为/desktop/flatsome而不是/Desktop/flatsome。只需在VS Code终端中将路径更改为大写字母D的Desktop，而不是小写字母d的desktop即可解决该问题。

- Ndatimana Gilbert

---

谢谢！我快疯了。 - oyalhi