Webpack：“有多个模块的名称只是大小写不同”但引用的模块是相同的答案

【问题标题】：Webpack: "there are multiple modules with names that only differ in casing" but modules referenced are identicalWebpack：“有多个模块的名称只是大小写不同”但引用的模块是相同的
【发布时间】：2018-05-12 01:39:30
【问题描述】：

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

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

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

什么可能导致这个问题？

【问题讨论】：

看看这个，它可能会解决你的问题stackoverflow.com/questions/61054565/…

标签： webpack webpack-hot-middleware

【解决方案1】：

这通常是由于小错误造成的。

例如，如果您要导入 import Vue from 'vue'、import Vuex from 'vuex' 等模块。

检查您的文件并检查您在哪里使用 from 'Vue' 或 from 'Vuex' - 确保使用与导入语句中完全相同的大写字母（大写字母）。

错误描述应该写得更清楚，但我解释的原因是我每次在 webpack 命令上出现此错误时出现问题的原因。

【讨论】：

你是对的，它是路径名，而不是模块名，这就是让我震惊的地方。我有NavBar/MainMenuItemMobile.js——导航栏中的“b”应该是小写的。
完全是老兄，就我而言，我在导入时使用了 React 和 trow 错误：import React, { Component } from 'React'; 仅修复 from 'react
我的问题是在一个组件中我引用了components/vue.js，而在另一个组件中我引用了components/Vue.js
只是补充一下——当我遇到这个错误时，这是因为我在GitBash 中的路径有一个小写的users，其中Webpack 期待一个大写的Users。
对于仍然遇到这种情况的任何人 - 关于有时会发生这种情况的提示 - 如果您使用 Visual Studio Code 并使用 QuickFix 功能添加了组件或模块，那么这很可能是外壳出错的地方 -显然 VSCode 不尊重区分大小写的操作系统上原始路径/文件的大小写（对我来说是 Mac）

【解决方案2】：

我也有这个警告，但我的问题是，比如有React项目的文件目录：

**/src/containers/PageOne/index.js
**/src/containers/PageTWO/pageOneAction.js

**/src/containers/PageOne/index.js
**/src/containers/PageTWO/pageTWOAction.js

还会有类似的警告。因为除了index.js，您最好不要使用相同的文件名（例如那些文件夹中的action.js），否则这可能会导致在具有其他大小写语义的文件系统上编译时出现意外行为。

为了解决这个警告，我们可以这样做：

**/src/containers/PageOne/index.js
**/src/containers/PageOne/pageOneAction.js

**/src/containers/PageTWO/index.js
**/src/containers/PageTWO/pageTWOAction.js

这是我的经验，希望对大家有所帮助。

【讨论】：

【解决方案3】：

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

出现这个问题是因为在模块中导入组件时像

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

我写的就像 manage-Exam 一样，其中 Exam 是 大写字母 并且 webpack 理解 small letter。

我用过的时候

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

使用过小规模的考试并解决了问题。

【讨论】：

【解决方案4】：

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

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

C:\MyProjects\project-X

如果您使用cd /c/myprojects/project-x 访问它（注意缺少大写的情况）然后运行npm start 您可能会遇到这个问题。

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

cd /C/MyProjects/project-X

【讨论】：

这正是我的问题。谢谢！
你拯救了我的一天！非常感谢！
我有这个确切的问题；然而，在不同的时间用不同的路径外壳安装了不同的包，我的node_modules 文件夹被冲洗掉了。我完全删除它，重新运行npm install，所有警告都消失了。
这条评论带来的快乐，非常感谢 Dimitar！
你是我的英雄。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

代替

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

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

【讨论】：

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

【解决方案7】：

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

【讨论】：

【解决方案8】：

我遇到了同样的问题，我将我的 react 文件夹命名为 UI 并且由 webpack 生成的路径不知何故变成了小写。

所以，我将它重命名为 ui 即小写而不是 UI，这让我的战斗开始了马上。

谢谢。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

在我的情况下（Win7、VSCode、Angular 6），即使我在各处修复了错误的案例路径，问题仍然存在。看起来 webpack 以某种方式缓存路径，所以解决它：

将导致问题的文件夹或文件重命名为不同的名称
构建
出现错误
重命名
构建
成功

【讨论】：

【解决方案11】：

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

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

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

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

【讨论】：

这是因为... Windows 文件系统不区分大小写。（因为在 Windows 10 中您可以将其设置为区分大小写，我明白了）

【解决方案12】：

我也有同样的问题。我导航到了一个目录 Trade_v3 ，而实际目录是 Trade_V3。更改目录后没有抛出此错误。

【讨论】：

【解决方案13】：

盘符的大小写也很重要。在我的例子中，Windows 10 有大写的“C”，而我在文件中有小写的“c”。

【讨论】：

【解决方案14】：

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

import React from 'React';

代替：

import React from 'react';

【讨论】：

【解决方案15】：

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

希望这两种方法能解决你的问题。

【讨论】：

【解决方案16】：

我在 Vue.js 中遇到了同样的问题。最终结果是我在两个不同命名空间的地方导入了一个组件。

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

import Step1 from './Step1'

通过将第二个更改为：

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

希望它对你们中的一些人有所帮助...

【讨论】：

【解决方案17】：

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

所以解决方法是：先打开相应的项目文件夹，然后只做“npm run dev”

【讨论】：

【解决方案18】：

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

我正在使用 VS Code Terminal，它在提示路径中使用 desktop 而不是 Desktop：

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

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

File -> Close Folder
File -> Open Folder

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

【讨论】：

这确实解决了我的问题，谢谢

【解决方案19】：

同样的问题发生在我身上，因为我将项目文件夹的名称更改为“Myclass”，而在 git bash 中由于某种原因它是“myclass”。当我更改为较低的“m”时，消息停止了。

【讨论】：

【解决方案20】：

当我尝试在窗口机器上的 vscode 终端中运行 npm start 时，我会遇到这个问题。问题是/desktop/flatsome 而不是/Desktop/flatsome 只需在您的vscode终端中将路径更改为大写D的桌面，而不是使用小写d的桌面

【讨论】：

谢谢！快疯了。

【解决方案21】：

这些解决方案都不适合我。做了什么：

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

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

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

How do I commit case-sensitive only filename changes in Git?

所以我删除了有问题的文件，提交到 Git，重新添加它们并重新提交 - 并且成功了。没有警告并且构建错误消失了。

【讨论】：

【解决方案22】：

如果你在 next.js 的链接中出现这个错误（进入 React）：

import Link from 'next/Link'

代替

import Link from 'next/link'

【讨论】：

这个把我压垮了。谢谢！

【解决方案23】：

我遇到了同样的问题，然后发现我的 vue 文件以小写命名，如下所示：event.vue。为了解决这个问题，我将它重命名为 Event.vue 并更新了我导入它的位置，然后它就可以工作了。对于 import 语句，它看起来像这样：

之前

从“@/components/NewsAndEvents/event”导入事件重命名文件后，它必须如下所示：

从“@/components/NewsAndEvents/Event”导入事件

【讨论】：

同样的事情发生在我身上，但 NextJS 。我使用了 webstorm，通常它会处理从大写到小写的重构，但它没有 - 并且应用程序不断刷新。
有时这个想法并不能很好地配合。

【解决方案24】：

同样的问题也发生在我身上，试试这个 cli git config --global core.ignorecase false。它可能是 Git 设置的区分大小写的配置。对我来说，一切都在没有任何警告的情况下运行。

【讨论】：

【解决方案25】：

如果有人在使用 vue-styleguidist 时遇到这个问题，那么这个 github issue 为我解决了问题。

【讨论】：

【解决方案26】：

我们使用 webpack 实现了这一点。在向 webpack 传递条目时，我们使用的是 path.resolve("./abc.ts")。这是基于当前终端路径解决相对浴。我们通过解析相对于当前目录的路径来解决这个问题。 path.resolve(__dirname, './abc.ts');

【讨论】：

【解决方案27】：

在我的情况下，我错误地有两个导入，如下所示：

import './Component.module.css'
import styles from './Component.module.css'

【讨论】：

【解决方案28】：

为我解决的问题（在下一个 js 中）是将目录名称更改为小写：

来自： /src/Components/NavBar/MainMenuItemMobile.js.

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

【讨论】：

【解决方案29】：

简单地重命名您的文件夹，然后键入 npm start 重试

【讨论】：

【解决方案30】：

我正在使用 Jetbrains Webstorm（在 Windows 上），并且我的运行配置中 package.json 的路径大小写错误。

~\Projects\x\XWebsite\package.json

->

~\projects\x\XWebsite\package.json

【讨论】：