Webpack："there are multiple modules with names that only differ in casing" 但引用的模块是相同的
Webpack: "there are multiple modules with names that only differ in casing" but modules referenced are identical
我正在使用 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
令人困惑的是，引用的 'two' 个文件只是一个文件——目录中没有两个文件，它们的名称只是大小写不同。
我还注意到，如果文件受到这些警告的影响，我的热重新加载器通常不会获取对文件的更改。
可能是什么导致了这个问题？
这通常是一个微小的拼写错误造成的。
例如，如果您要导入像 import Vue from 'vue'、import Vuex from 'vuex'.
这样的模块
检查您的文件并检查您在哪里使用了 from 'Vue' 或 from 'Vuex' - 确保使用与导入语句中完全相同的大写字母（大写字母）。
错误描述应该写的更清楚了，但是我每次解释的都是webpack命令这个错误的问题原因。
我也有这个警告，但我的问题是，
比如有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
这是我的经验，希望对大家有所帮助。
我在 angular 6 项目中遇到了同样的问题。
出现此问题是因为在
模块中导入组件时
import { ManageExamComponent } from './manage-Exam.component';
我写的像 manage-Exam，其中 Exam 是 大写字母 并且 webpack 理解 小写字母 。
我一用就
import { ManageExamComponent } from './manage-exam.component';
使用了小型考试并解决了问题。
对于遇到此问题并尝试了建议的修复方法但没有成功的其他人，这是另一种可能的解决方案。
确保您在终端中使用的路径大小写正确。例如，如果您在 Windows 上使用 git bash 并且您的项目具有以下路径：
C:\MyProjects\project-X
如果您使用 cd /c/myprojects/project-x（注意缺少大写字母）然后 运行 npm start 访问它，您可能会遇到这个问题。
解决方案是考虑项目路径区分大小写并按如下方式使用：
cd /C/MyProjects/project-X
我有一个类似的错误，但与其他答案描述的不完全相同。希望我的回答能对大家有所帮助。
我正在导入两个组件的文件（angular 7 个项目）：
组件 1：
LANGUAGES = require("../../models/LANGUAGES.json");
组件 2：
LANGUAGES = require("../../models/LANGUAGES.JSON");
这是一个愚蠢的错误：这里的问题是我在同一个文件上使用了两个不同的 requires 不同的大写字母（它产生了一个警告）。
如何解决问题？使用相同的模型。
组件 1：
LANGUAGES = require("../../models/LANGUAGES.json");
组件 2：
LANGUAGES = require("../../models/LANGUAGES.json");
或
组件 1：
LANGUAGES = require("../../models/LANGUAGES.JSON");
组件 2：
LANGUAGES = require("../../models/LANGUAGES.JSON");
它发生在我身上 angular 6。
这是您的 ide 或文本编辑器可能会忽略的大小写字母误用错误。
我用过
import { PayComponent } from './payment/pay/pay.component';
代替
import { PayComponent } from './Payment/pay/pay.component';
想象一下 "P" 和 "p"。祝你好运。
类似的问题，但我的问题是安装在 C:\Users\<username>\AppData\Local\Yarn 中的软件包。删除该文件夹并重新添加我想要的全局包解决了这个问题。
我遇到了同样的问题，我将我的反应文件夹命名为 UI 以及生成的路径webpack 以某种方式将其变成小写。
所以，我将其重命名为 ui 即小写而不是 UI，这让我的交战马上就结束了。
谢谢。
如果您在 Visual Studio 代码和 Gitbash 中看到这个，请转到设置，搜索 C:\（大写 C）并将 Gitbash.exe 的路径更改为 c:\ 和它会消失。
在我的情况下（Win7，VSCode，Angular 6）即使我在所有地方修复了错误的案例路径，问题仍然存在。
看起来 webpack 以某种方式缓存了路径，
所以要解决它：
- 将导致问题的文件夹或文件重命名为不同的名称
- 建造
- 遇到错误
- 重新命名
- 建造
- 成功
我们 运行 对 Windows 作出反应，我的一位开发人员看到了这一点，但没有其他人遇到过这个问题。
我看着他们打开 VS Code 到项目的子目录，然后用小写字母（而不是实际的混合大小写）对项目目录做了 cd，然后 运行 npm start.
您实际上可以在终端中看到小写的目录名称 c:\someproject\somedir，但在 Windows 资源管理器中它是 c:\SomeProject\SomeDir。
令我惊讶的是 Windows 命令终端允许您执行此操作。
我也遇到了同样的问题。我导航到目录 Trade_v3 ，而实际目录是 Trade_V3。更改目录后没有抛出此错误。
盘符的大小写也很重要。在我的例子中，Windows 10 有大写 'C' 而我在文件中有小写 'c'。
是的，如果您使用了相同的名称但大小写发生了变化，就会发生这种情况：
例如，您使用了
import React from 'React';
而不是：
import React from 'react';
// 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'
希望以上两种方式能解决您的问题。
我在 Vue.js 遇到了同样的问题。最后发现我在两个不同命名空间的地方导入了一个组件。
import Step1 from '~/Components/Application/Step1'
import Step1 from './Step1'
通过将第二个更改为：
来修复它
import Step1 from '~/Components/Application/Step1'
希望对大家有所帮助...
如果您正在使用 VS Code 并且您正在执行“npm 运行 dev”，但是相应的项目文件夹 未在 VS Code 中打开 然后将出现这些 3 条警告。
所以解决方法是：首先打开相应的项目文件夹然后只做"npm run dev"
天哪，我终于找到了解决问题的方法。
我正在使用 VS 代码终端，它使用的是 desktop 而不是 Desktop在提示的路径中：
C:\Users\Hans\desktop\NODE JS\mysite>
要修复它，我只需要关闭项目文件夹并重新打开它：
File -> Close Folder
File -> Open Folder
现在 VS Code 终端使用正确的提示路径。
同样的问题发生在我身上，因为我将我的项目文件夹的名称更改为 "Myclass"，而在 git bash 中由于某种原因它是 "myclass"。当我更改为较低 "m" 时，消息停止了。
当我尝试在 window 机器上的 vscode 终端中 运行 npm start 时，我遇到了这个问题。问题是 /desktop/flatsome 而不是 /Desktop/flatsome 只需在您的 vscode 终端
None 这些解决方案对我有用。做了什么：
- 删除有问题的文件（但在其他地方备份它们！）。
- 提交对 Git 的更改。
- 从备份中再次添加相同的文件。
- 将新文件提交到 Git
... 问题已解决！
在我的例子中，我只是更改了包含导入模块的文件名的大写。它们在文件系统（OSX Finder，Bash）和代码编辑器（VS Code）中显示为 lower-case。但是，在 VS 代码中打开文件仍然在代码编辑器选项卡中向我显示旧文件名。我尝试完全删除文件，然后 re-adding 它们。这没有用 - 新添加的文件仍在编辑器选项卡中显示旧名称，而且我的构建仍在中断。
然后经过几个小时徒劳的修复尝试后，我发现 Git 不会将文件大小写的更改视为更改，因此它实际上从未更改过这些文件名：
How do I commit case-sensitive only filename changes in Git?
所以我删除了有问题的文件，提交给 Git、re-add 它们和 re-committed - 它起作用了。没有警告，构建错误也消失了。
如果您在 next.js 的 link 中出现此错误（进入 React）：
import Link from 'next/Link'
代替
import Link from 'next/link'
我遇到了同样的问题，然后发现我的 vue 文件是以小写形式命名的：event.vue。为了解决这个问题，我将其重命名为 Event.vue 并更新了我导入它的位置，然后它就起作用了。对于导入语句，它看起来像这样：
之前
从“@/components/NewsAndEvents/event”导入事件
重命名文件后，它必须如下所示：
从“@/components/NewsAndEvents/Event”导入事件
我也遇到了同样的问题，试试这个cli git config --global core.ignorecase false。它可能是由 Git 设置的区分大小写的配置。对我来说，一切都在没有任何警告的情况下运行。
如果有人在使用 vue-styleguidist 时遇到这个问题，那么这个 github issue 为我解决了问题。
我们用 webpack 解决了这个问题。将条目传递给 webpack 时，我们使用 path.resolve("./abc.ts")。这是根据当前终端路径解析相对浴。我们通过解析相对于当前目录的路径来解决这个问题。 path.resolve(__dirname, './abc.ts');
在我的例子中，我错误地导入了两个，如下所示：
import './Component.module.css'
import styles from './Component.module.css'
为我解决的（在下一个 js 上）是将目录名称更改为小写：
来自：
/src/Components/NavBar/MainMenuItemMobile.js.
收件人：
/src/components/navBar/MainMenuItemMobile.js.
只需重命名您的文件夹，然后输入 npm start 重试
我正在使用 Jetbrains Webstorm（在 Windows 上），运行 配置中 package.json 的路径大写错误。
~\Projects\x\XWebsite\package.json
->
~\projects\x\XWebsite\package.json
我亲自通过更换解决了这个问题
import axios from 'Axios';
到
import axios from 'axios';
对我来说，它是将组件文件夹移到页面之外。好傻啊
我在 NextJS 项目中遇到过这个问题，但仅当我在 VS 代码调试器中使用 通过 NPM 配置启动时 - launch.json。当我手动 运行 npm run dev 或 next dev 它工作正常。
经过一番探索，我意识到我需要在配置中添加 "cwd": "${workspaceFolder}", 才能正确检测当前工作目录。
下面是我的 NextJS 项目的工作配置。
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": ["run-script", "dev"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
}
我有同样的问题。我认为这与许可有关。如果您在 c:/dev/../projectfolder 尝试 运行 应用程序，它可能无法正常工作。但是，如果您将在 c:/user/../projectfolder/ 尝试 运行 应用程序，它是工作伙伴。
我也遇到了这个问题。我通常 运行 Node/etc。在 Fedora 机器上，但需要在 Windows 服务器上 运行 它。
经过 30 分钟的挠头，想知道它为什么会崩溃，结果是这样的：
c:\myproject\
而不是：
C:\myproject\
注意到区别了吗？
我已经很想念 Fedora 了。所以我相信如果你在 Windows.
上部署，建议使用 WSL
我正在使用 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
令人困惑的是，引用的 'two' 个文件只是一个文件——目录中没有两个文件，它们的名称只是大小写不同。
我还注意到，如果文件受到这些警告的影响，我的热重新加载器通常不会获取对文件的更改。
可能是什么导致了这个问题？
这通常是一个微小的拼写错误造成的。
例如，如果您要导入像 import Vue from 'vue'、import Vuex from 'vuex'.
检查您的文件并检查您在哪里使用了 from 'Vue' 或 from 'Vuex' - 确保使用与导入语句中完全相同的大写字母（大写字母）。
错误描述应该写的更清楚了，但是我每次解释的都是webpack命令这个错误的问题原因。
我也有这个警告，但我的问题是， 比如有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
这是我的经验，希望对大家有所帮助。
我在 angular 6 项目中遇到了同样的问题。
出现此问题是因为在
模块中导入组件时import { ManageExamComponent } from './manage-Exam.component';
我写的像 manage-Exam，其中 Exam 是 大写字母 并且 webpack 理解 小写字母 。
我一用就
import { ManageExamComponent } from './manage-exam.component';
使用了小型考试并解决了问题。
对于遇到此问题并尝试了建议的修复方法但没有成功的其他人，这是另一种可能的解决方案。
确保您在终端中使用的路径大小写正确。例如，如果您在 Windows 上使用 git bash 并且您的项目具有以下路径：
C:\MyProjects\project-X
如果您使用 cd /c/myprojects/project-x（注意缺少大写字母）然后 运行 npm start 访问它，您可能会遇到这个问题。
解决方案是考虑项目路径区分大小写并按如下方式使用：
cd /C/MyProjects/project-X
我有一个类似的错误，但与其他答案描述的不完全相同。希望我的回答能对大家有所帮助。
我正在导入两个组件的文件（angular 7 个项目）：
组件 1：
LANGUAGES = require("../../models/LANGUAGES.json");
组件 2：
LANGUAGES = require("../../models/LANGUAGES.JSON");
这是一个愚蠢的错误：这里的问题是我在同一个文件上使用了两个不同的 requires 不同的大写字母（它产生了一个警告）。
如何解决问题？使用相同的模型。
组件 1：
LANGUAGES = require("../../models/LANGUAGES.json");
组件 2：
LANGUAGES = require("../../models/LANGUAGES.json");
或
组件 1：
LANGUAGES = require("../../models/LANGUAGES.JSON");
组件 2：
LANGUAGES = require("../../models/LANGUAGES.JSON");
它发生在我身上 angular 6。 这是您的 ide 或文本编辑器可能会忽略的大小写字母误用错误。 我用过
import { PayComponent } from './payment/pay/pay.component';
代替
import { PayComponent } from './Payment/pay/pay.component';
想象一下 "P" 和 "p"。祝你好运。
类似的问题，但我的问题是安装在 C:\Users\<username>\AppData\Local\Yarn 中的软件包。删除该文件夹并重新添加我想要的全局包解决了这个问题。
我遇到了同样的问题，我将我的反应文件夹命名为 UI 以及生成的路径webpack 以某种方式将其变成小写。
所以，我将其重命名为 ui 即小写而不是 UI，这让我的交战马上就结束了。
谢谢。
如果您在 Visual Studio 代码和 Gitbash 中看到这个，请转到设置，搜索 C:\（大写 C）并将 Gitbash.exe 的路径更改为 c:\ 和它会消失。
在我的情况下（Win7，VSCode，Angular 6）即使我在所有地方修复了错误的案例路径，问题仍然存在。 看起来 webpack 以某种方式缓存了路径， 所以要解决它：
- 将导致问题的文件夹或文件重命名为不同的名称
- 建造
- 遇到错误
- 重新命名
- 建造
- 成功
我们 运行 对 Windows 作出反应，我的一位开发人员看到了这一点，但没有其他人遇到过这个问题。
我看着他们打开 VS Code 到项目的子目录，然后用小写字母（而不是实际的混合大小写）对项目目录做了 cd，然后 运行 npm start.
您实际上可以在终端中看到小写的目录名称 c:\someproject\somedir，但在 Windows 资源管理器中它是 c:\SomeProject\SomeDir。
令我惊讶的是 Windows 命令终端允许您执行此操作。
我也遇到了同样的问题。我导航到目录 Trade_v3 ，而实际目录是 Trade_V3。更改目录后没有抛出此错误。
盘符的大小写也很重要。在我的例子中，Windows 10 有大写 'C' 而我在文件中有小写 'c'。
是的，如果您使用了相同的名称但大小写发生了变化，就会发生这种情况： 例如，您使用了
import React from 'React';
而不是：
import React from 'react';
// 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'
希望以上两种方式能解决您的问题。
我在 Vue.js 遇到了同样的问题。最后发现我在两个不同命名空间的地方导入了一个组件。
import Step1 from '~/Components/Application/Step1'
import Step1 from './Step1'
通过将第二个更改为：
来修复它import Step1 from '~/Components/Application/Step1'
希望对大家有所帮助...
如果您正在使用 VS Code 并且您正在执行“npm 运行 dev”，但是相应的项目文件夹 未在 VS Code 中打开 然后将出现这些 3 条警告。
所以解决方法是：首先打开相应的项目文件夹然后只做"npm run dev"
天哪，我终于找到了解决问题的方法。
我正在使用 VS 代码终端，它使用的是 desktop 而不是 Desktop在提示的路径中：
C:\Users\Hans\desktop\NODE JS\mysite>
要修复它，我只需要关闭项目文件夹并重新打开它：
File -> Close Folder
File -> Open Folder
现在 VS Code 终端使用正确的提示路径。
同样的问题发生在我身上，因为我将我的项目文件夹的名称更改为 "Myclass"，而在 git bash 中由于某种原因它是 "myclass"。当我更改为较低 "m" 时，消息停止了。
当我尝试在 window 机器上的 vscode 终端中 运行 npm start 时，我遇到了这个问题。问题是 /desktop/flatsome 而不是 /Desktop/flatsome 只需在您的 vscode 终端
None 这些解决方案对我有用。做了什么：
- 删除有问题的文件（但在其他地方备份它们！）。
- 提交对 Git 的更改。
- 从备份中再次添加相同的文件。
- 将新文件提交到 Git ... 问题已解决！
在我的例子中，我只是更改了包含导入模块的文件名的大写。它们在文件系统（OSX Finder，Bash）和代码编辑器（VS Code）中显示为 lower-case。但是，在 VS 代码中打开文件仍然在代码编辑器选项卡中向我显示旧文件名。我尝试完全删除文件，然后 re-adding 它们。这没有用 - 新添加的文件仍在编辑器选项卡中显示旧名称，而且我的构建仍在中断。
然后经过几个小时徒劳的修复尝试后，我发现 Git 不会将文件大小写的更改视为更改，因此它实际上从未更改过这些文件名：
How do I commit case-sensitive only filename changes in Git?
所以我删除了有问题的文件，提交给 Git、re-add 它们和 re-committed - 它起作用了。没有警告，构建错误也消失了。
如果您在 next.js 的 link 中出现此错误（进入 React）：
import Link from 'next/Link'
代替
import Link from 'next/link'
我遇到了同样的问题，然后发现我的 vue 文件是以小写形式命名的：event.vue。为了解决这个问题，我将其重命名为 Event.vue 并更新了我导入它的位置，然后它就起作用了。对于导入语句，它看起来像这样：
之前
从“@/components/NewsAndEvents/event”导入事件 重命名文件后，它必须如下所示：
从“@/components/NewsAndEvents/Event”导入事件
我也遇到了同样的问题，试试这个cli git config --global core.ignorecase false。它可能是由 Git 设置的区分大小写的配置。对我来说，一切都在没有任何警告的情况下运行。
如果有人在使用 vue-styleguidist 时遇到这个问题，那么这个 github issue 为我解决了问题。
我们用 webpack 解决了这个问题。将条目传递给 webpack 时，我们使用 path.resolve("./abc.ts")。这是根据当前终端路径解析相对浴。我们通过解析相对于当前目录的路径来解决这个问题。 path.resolve(__dirname, './abc.ts');
在我的例子中，我错误地导入了两个，如下所示：
import './Component.module.css'
import styles from './Component.module.css'
为我解决的（在下一个 js 上）是将目录名称更改为小写：
来自：
/src/Components/NavBar/MainMenuItemMobile.js.
收件人：
/src/components/navBar/MainMenuItemMobile.js.
只需重命名您的文件夹，然后输入 npm start 重试
我正在使用 Jetbrains Webstorm（在 Windows 上），运行 配置中 package.json 的路径大写错误。
~\Projects\x\XWebsite\package.json
->
~\projects\x\XWebsite\package.json
我亲自通过更换解决了这个问题
import axios from 'Axios';
到
import axios from 'axios';
对我来说，它是将组件文件夹移到页面之外。好傻啊
我在 NextJS 项目中遇到过这个问题，但仅当我在 VS 代码调试器中使用 通过 NPM 配置启动时 - launch.json。当我手动 运行 npm run dev 或 next dev 它工作正常。
经过一番探索，我意识到我需要在配置中添加 "cwd": "${workspaceFolder}", 才能正确检测当前工作目录。
下面是我的 NextJS 项目的工作配置。
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": ["run-script", "dev"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
}
我有同样的问题。我认为这与许可有关。如果您在 c:/dev/../projectfolder 尝试 运行 应用程序，它可能无法正常工作。但是，如果您将在 c:/user/../projectfolder/ 尝试 运行 应用程序，它是工作伙伴。
我也遇到了这个问题。我通常 运行 Node/etc。在 Fedora 机器上，但需要在 Windows 服务器上 运行 它。
经过 30 分钟的挠头，想知道它为什么会崩溃，结果是这样的：
c:\myproject\
而不是：
C:\myproject\
注意到区别了吗？
我已经很想念 Fedora 了。所以我相信如果你在 Windows.
上部署，建议使用WSL