logo标签列表

Webpack："存在多个模块具有仅在大小写上不同的名称，但所引用的模块是相同的"

webpackwebpack-hot-middleware
162

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

令人困惑的是，“两个”被引用的文件实际上只有一个文件 - 在目录中没有两个名称仅在大小写上不同的文件。

我还注意到，如果文件受这些警告影响，则我的热重新加载器经常无法捕获对文件的更改。

可能是什么原因导致了这个问题？

看看这个，它可能会解决你的问题 https://dev59.com/7broa4cB1Zd3GeqPfjJV - Sarthak Saklecha
40个回答
2

我在Vue.js中遇到了同样的问题。最终发现我在两个不同的命名空间下导入了同一个组件。

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

import Step1 from './Step1'

通过将第二个更改为以下内容来修复它:

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

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

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

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

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

希望这两种方法能解决您的问题。
1

我在一个NextJS项目中遇到了这个问题，但只有当我在VS Code Debugger的通过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"
    }
1
我曾经遇到同样的问题，后来发现我的vue文件名是小写的，像这样：event.vue。为了解决它，我将其重命名为Event.vue，并更新了导入它的地方，然后它就可以工作了。对于导入语句，它看起来像这样：

之前

import Event from '@/components/NewsAndEvents/event'

在重命名文件后，它必须看起来像这样：

import Event from '@/components/NewsAndEvents/Event'

我也遇到了同样的问题，但是是在使用NextJS时。我使用的是WebStorm，通常它可以处理从大写字母到小写字母的重构，但这次却没有成功——应用程序一直在刷新。 - Bharadwaj Giridhar
有时候想法不太合作。 - Blessing
0
在我的情况下，我正在导入一个JSON文件 - 带有原始大小写，例如。
const data = require('../data/translations-en-GB.json'); // original file case size

它抛出了以下警告：

有多个模块的名称只有大小写不同。

我将其更改为

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

（整个文件名小写）警告消失了。

0

我也有这个警告，但我的问题是，例如，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

这是我的经验，希望能对某些人有所帮助。

0

我也遇到了同样的问题。我导航到了一个名为Trade_v3的目录，而实际目录是Trade_V3。更改目录后，这个错误就没有出现。

0

字母驱动器的大小写也很重要。在我的情况下，Windows 10 使用大写字母'C'，而我在文件中使用小写字母'c'。

0
在我的情况下（Win7，VSCode，Angular 6），即使我已经在所有地方修复了错误的路径大小写，问题仍然存在。看起来webpack以某种方式缓存了路径，因此解决方法如下：
  • 将导致问题的文件夹或文件重命名为其他名称
  • 构建
  • 出现错误
  • 重新命名回原名称
  • 再次构建
  • 成功
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接