Webpack: “有多个模块的名称仅在大小写上有所不同”，但所引用的模块是相同的

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

令人困惑的是，所引用的“两个”文件只是一个文件ーー目录中没有两个文件的名称只有在以下情况下才不同。

我还注意到，如果文件受到这些警告的影响，我的热重新加载程序通常不会接收对文件的更改。

是什么导致了这个问题？

152841 次浏览
小开
最佳答案

这通常是一个很小的打字错误的结果。

例如，如果像这样导入模块:

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

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

小开

我在角6项目中也有同样的问题。

之所以发生此问题，是因为在导入模块中的组件时，如

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

我已经写了喜欢管理-考试的地方考试是在 大写字母和网络包了解 小字母。

我一吸毒

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

使用考试中的小问题得到解决。

小开

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

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

C:\MyProjects\project-X

如果您使用 cd /c/myprojects/project-x访问它(注意缺少大写字母) ，然后运行 npm start，您可能会面临这个问题。

解决办法是考虑到项目路径的个案敏感性，并按以下方式使用:

cd /C/MyProjects/project-X

小开

我有一个类似的错误，但不完全相同的描述，其他的答案。我希望我的回答能帮到某人。

我导入一个文件在两个组件(角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号角的时候也遇到过这种情况。 这是大写字母和小写字母的误用错误，你的想法或文本编辑可能会忽略。 我用过

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

而不是

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

想象一下只有“ P”和“ P”，祝你好运。

小开

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

小开

我有同样的问题，我已经命名我的反应文件夹为 < em > UI 和路径，是由 webpack 生成的不知何故，使其成为小写。

因此，我将它改名为 [俄语]，即小写字母，而不是 < em > UI ，这使得我的战斗马上开始了。

谢谢。

小开

如果你在 Visual Studio Code 和 Gitbash 中看到这个，进入设置，搜索 C: (大写 C) ，将 Gitbash.exe 的路径改为 c: ，它就会消失。

小开

在我的例子中(Win7，VSCode，Angular 6) ，即使我在任何地方都修复了错误的大小写路径，问题仍然存在。 看起来网络包以某种方式缓存了路径, 为了解决这个问题:

  • 重命名导致不同问题的文件夹或文件
  • 建造
  • 出错了
  • 重新命名
  • 建造
  • 成功
小开

我们在 Windows 上运行反应程序，我的一个开发人员看到了这一点，但其他人都没有这个问题。

我看到他们将 VS Code 打开到项目的一个子目录，然后将 cd打开到小写的项目目录(而不是实际的混合大小写) ，然后运行 npm start。

实际上，你可以在终端中看到目录名的小写形式是 c:\someproject\somedir，但文件资源管理器是 c:\SomeProject\SomeDir。

我很惊讶 Windows 命令终端允许您这样做。

小开

我也有同样的问题。我导航到了一个目录 Trade _ v3，而实际目录是 Trade _ V3。更改目录后，此错误没有引发。

小开

信件驱动器的情况也很重要。在我的例子中，Windows10的大写字母是“ 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 代码和你正在做的“ Npm 运行 dev”，但在 VS 代码相应的项目文件夹 还没打开，那么这些 三次警告将发生。

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

小开

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

我使用的是 VS 码终端，它在提示符的路径中使用的是 桌面而不是 桌面:

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

为了解决这个问题，我只需要关闭项目文件夹并重新打开它:

File -> Close Folder
File -> Open Folder

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

小开

同样的问题也发生在我身上，因为我将项目文件夹的名称更改为“ Myclass”，并且由于某种原因，在 git bash 中它是“ Myclass”。当我改成小写的“ m”时，信息就停止了。

小开

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

小开

这些解决方案对我都没有用，但有用的是:

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

在我的例子中，我只是改变了包含导入模块的文件名的大小写。它们在文件系统(OSX Finder，Bash)和代码编辑器(VS Code)中显示为小写。但是，在 VS 代码中打开文件仍然会在代码编辑器选项卡中显示旧的文件名。我尝试完全删除文件，然后重新添加它们。这没有工作-新添加的文件仍然显示在编辑器选项卡中的旧名称，我的构建仍然中断。

经过几个小时徒劳的修复尝试后，我发现 Git 并不认为文件大小的变化是变化，所以它实际上从未更改过这些文件名:

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

因此，我删除了有问题的文件，提交给 Git，重新添加它们，再重新提交——它奏效了。没有警告，生成错误也消失了。

小开

如果在 next.js (into React)的链接中出现这个错误:

import Link from 'next/Link'

而不是

import Link from 'next/link'
小开

我遇到了同样的问题，然后发现我的 vue 文件的名称是这样的小写: event.vue。为了解决这个问题，我将它重命名为 Event.vue，并在导入它的地方进行了更新，然后它工作了。对于 import 声明，它看起来是这样的:

之前

导入事件(import Event from’@/Component/NewsAndEvents/Event) 重命名文件后，它必须像下面这样:

导入事件来自“@/Component/NewsAndEvents/Event”

小开

同样的问题发生在我身上，试试这个 cli git config --global core.ignorecase false。它可能是 Git 设置的区分大小写的配置。对我来说，之后的一切都是毫无征兆的。

小开

如果有人在使用 vue 风格的指导者时偶然发现了这个问题，那么这个 Github 的问题为我修复了一些东西。

小开

我们用网络包装。当向 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 再试一次

小开

我正在使用 Jetbrain Webstorm (在 Windows 上) ，并且在 Run 配置中到 package.json 的路径大小写错误。

~ Projects x XSite package.json

- >

~ Projects x XSite package.json

小开

我亲自解决了这个问题 import axios from 'Axios'; 到 import axios from 'axios';

小开

对我来说，这是移动组件文件夹外的页面。这样一个愚蠢的。

小开

我在一个 NextJS 项目中遇到过这个问题，但只有在 VS Code Debugger-launch.json中使用 通过 NPM 发射配置时才会遇到。当我手动运行 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/. ./project 文件夹的运行应用程序，可能它不工作。但是如果你想尝试在 C:/user/. ./projectfile/的运行应用程序，它的工作伙伴。

小开

我对这个也有意见。我通常在 Fedora 机器上运行 Node/etc，但需要在 Windows Server 上运行它。

我挠了半个小时的头，想知道为什么它会崩溃，最后得出的结论是:

c:\myproject\

而不是:

C:\myproject\

注意到区别了吗？

我已经开始想念 Fedora 了，所以我相信如果你在 Windows 上部署的话，建议你使用 WSL。

小开

和 nextjs 有同样的问题。在 nextjs 中，检查如何在我的例子中导入 Link 和 Image，我将 Image 导入为 Image from "next/Image" 而不是进口 Image from "next/image" 更新后，错误消失。

小开

在我的案例中，我导入了一个 JSON 文件-带有原始的案例大小，例如。

const data = require('../data/translations-en-GB.json'); // original file case size

它发出警告:

有多个模块的名称仅在大小写上有所不同。

我改成了

const data = require('../data/translations-en-gb.json'); // required case size

(整个文件名小写) ，警告消失了。


提交答案