webpack - 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

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

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

什么可能导致此问题？

score 233 · Accepted Answer

这通常是一个微小的错字的结果。

例如，如果您正在导入您的模块，如import Vue from 'vue', import Vuex from 'vuex'。

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

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

score 147 · Accepted Answer

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

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

C:\MyProjects\project-X

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

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

cd /C/MyProjects/project-X

score 27 · Accepted Answer

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

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

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

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

File -> Close Folder
File -> Open Folder

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

score 23 · Accepted Answer

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

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

代替

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

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

score 5 · Accepted Answer

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

import Link from 'next/Link'

代替

import Link from 'next/link'

score 5 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

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

发生此问题是因为在模块中导入组件时

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

我写过类似 manage-Exam ，其中 Exam 是大写字母，webpack 理解小写字母。

我一使用

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

使用小考试并解决问题。

score 4 · Accepted Answer

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

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

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

score 3 · Accepted Answer

当我尝试npm start在窗口机器上的 vscode 终端中运行时，会发生这个问题。/desktop/flatsome而问题只是在你的vscode终端中用大写字母而不是用小写字母/Desktop/flatsome改变桌面的路径Dd

score 3 · Accepted Answer

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

import React from 'React';

代替：

import React from 'react';

score 1 · Accepted Answer

如果您正在使用VS Code并且您正在执行“ npm run dev ”但相应的项目文件夹未在 VS Code 中打开，则将出现这3 个警告。

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

score 1 · Accepted Answer

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

前

import Event from '@/components/NewsAndEvents/event' 重命名文件后，它必须如下所示：

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

score 1 · Accepted Answer

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

希望这两种方式能解决你的问题。</p>

score 0 · Accepted Answer

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

score 0 · Accepted Answer

我在 NextJS 项目中遇到了这个问题，但只有当我在 VS Code Debugger - 中通过 NPM 配置使用 Launchlaunch.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"
    }

score 0 · Accepted Answer

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

~\Projects\x\XWebsite\package.json

->

~\projects\x\XWebsite\package.json

score 0 · Accepted Answer

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

将导致问题的文件夹或文件重命名为不同的东西
建造
出现错误
重命名回来
建造
成功

score 0 · Accepted Answer

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

score 0 · Accepted Answer

就我而言，我错误地有两个导入，如下所示：

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

score 0 · Accepted Answer

这些解决方案都不适合我。所做的是：

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

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

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

如何在 Git 中提交仅区分大小写的文件名更改？

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

score 0 · Accepted Answer

我有一个类似的错误，但与其他答案所描述的不完全相同。我希望我的回答可以帮助别人。

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

score 0 · Accepted Answer

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

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

import Step1 from './Step1'

通过将第二个更改为：

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

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

score 0 · Accepted Answer

0

对我来说，它是将组件文件夹移到页面之外。这么傻的一个。

于 2021-11-21T19:51:54.517 回答

score 0 · Accepted Answer

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

score 0 · Accepted Answer

盘符的大小写也很重要。就我而言，Windows 10 在文件中使用大写字母“C”，而我在文件中使用小写字母“c”。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

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

于 2021-05-29T17:53:00.860 回答

score 0 · Accepted Answer

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

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

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

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

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

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

所以，我将它重命名为ui，即小写而不是UI，这让我的交战马上就结束了。

谢谢。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

-1

我个人通过替换 import axios from 'Axios'; 来解决了这个问题import axios from 'axios';

于 2021-10-25T09:29:10.960 回答

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

33 回答 33

Related

Reference