Webpack: "there are multiple modules with names that only differ in casing"但引用的模块是相同的

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' 之类的短语> 并确保使用与导入语句中完全相同的大写字母。

背景:

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

我所解释的就是每次 webpack 命令上出现此错误时出现问题的原因。