Webpack: “there are multiple modules with names th

问题:

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?

回答1:

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.

回答2:

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:\MyProjects\project-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

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

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");

回答7:

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

回答8:

I had the same issue, I had named my react folder as UI and the path which was generated by webpack was somehow making it in the lowercase.

So, I renamed it to ui ie in lowercase instead of UI, that made my warring go right away.

Thanks.

回答9:

If you are seeing this in Visual Studio Code and Gitbash, go to settings, and search for C:\ (uppercase C) and change the path for the Gitbash.exe to c:\ and it will go away.