Webpack: "there are multiple modules with names that only differ in casing" but modules referenced are identical

I'm using webpack 3.8.1 and am receiving several instances of the following build warning:

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

What's confusing is that the 'two' files referenced are just one file—there are no two files in the directory whose names differ only in case.

I've also noticed that my hot reloader often doesn't pick up changes to a file if it is affected by these warnings.

What could be causing this issue?

Solution

This is usually the result of a minuscule typo by wrongly using either an capital first letter or a lower case first letter when the opposite was needed.

For instance, if you are importing your modules like this:

import Vue from 'vue'

or:

import Vuex from 'vuex'

Go through your files and check where you used phrases like from 'Vue' or from 'Vuex' and make sure to use the exact same capitals (uppercase letters) as in your import statements.

Background:

The error basically says that there are multiple modules of a similar name only differing in casing in our code which seems to indicate that on the time you refer to your "import" module but don't use the correct casing, Vue will try to create another module with the aforementioned name difference yet both are pointing to the same module reference. So Vue could have been more resilient by jut ignoring the casing of the module reference name in our code.

What I explained has been the cause of my problem each time for this error on webpack commands.