Myujth

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?

This is usually a result of a minuscule typo.

If you are importing your modules like import Vue from 'vue', import Vuex from 'vuex'.

Go through your files and check where you used from 'Vue' or from 'Vuex'

The error descriptions should have been written more clearly, but what I explained has been the cause of my problem each time for this error on webpack commands.

It happened to me on angular 6.
It's capital and small letter misusage error which your ide or text editor may ignore.
I USED

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

INSTEAD OF

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

IMAGINE JUST "P" and "p". Goodluck.

I had the same issue in angular 6 project.

This issue occurred because while importing component in the module like

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

I have written like manage-Exam where Exam is in capital letter and webpack understand small letter.

As soon as i used

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

used exam in small and issue resolved.

For others that are facing this issue and tried the suggested fixes with no luck, here is another possible fix.

Ensure that the path you used in your terminal has the correct capitalization. For example if you're using git bash on Windows and your project has the following path:

C:MyProjectsproject-X

If you access it using cd /c/myprojects/project-x (note the lack of capital cases) and then run npm start you might face this problem.

The solution would be to consider the project path case-sensitive and use it as follows:

cd /C/MyProjects/project-X

I also have this warning, but my problem is that,
for example, there is the file directory of React project:

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

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

And there will be a similar warning. Because you'd better not use the same file name(such as action.js in those folders) excluding index.js, otherwise this can lead to unexpected behavior when compiling on a file system with other case-semantic.

To solve this warning, we could do that:

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

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

This is my experience, hope it could help someone.

I had a similar error but not exactly the same described by other answers. I hope my answer can help someone.

I was importing a file in two components (angular 7 project):

Component 1:

LANGUAGES = require("../../models/LANGUAGES.json");

Component 2:

LANGUAGES = require("../../models/LANGUAGES.JSON");

This is a foolish mistake: the problem here is I'm using two differents requires on the same file with different capital letters (it generated a warning).

How to solve the problem ? Use the same model.

Component 1:

LANGUAGES = require("../../models/LANGUAGES.json");

Component 2:

LANGUAGES = require("../../models/LANGUAGES.json");

OR

Component 1:

LANGUAGES = require("../../models/LANGUAGES.JSON");

Component 2:

LANGUAGES = require("../../models/LANGUAGES.JSON");

Similar issue, but my problem was packages installed in C:Users<username>AppDataLocalYarn. Deleting that folder and re-adding the global packages I wanted fixed the issue.