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

令人困惑的是,引用的"两个"文件只是一个文件 - 目录中没有两个文件,其名称仅在大小写上有所不同.

我还注意到,如果受到这些警告的影响,我的热重新加载器通常不会对文件进行更改.

可能导致此问题的原因是什么？

Answer 1

这通常是一个微不足道的错字的结果.

如果你要导入你的模块import Vue from 'vue',import Vuex from 'vuex'.

浏览您的文件并检查您使用的位置from 'Vue'或from 'Vuex'

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

Answer 2

对于其他遇到此问题并尝试过建议的修复程序但没有运气的人，这是另一种可能的解决方案。

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

C:\MyProjects\project-X

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

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

cd /C/MyProjects/project-X

Answer 3

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

我正在使用VS Code 终端，它在提示路径中使用的是桌面而不是桌面：

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

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

File -> Close Folder
File -> Open Folder

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

Answer 4

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

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

代替

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

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

Answer 5

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

import Link from 'next/Link'

代替

import Link from 'next/link'

Answer 6

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

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

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

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

Answer 7

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

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

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