问题
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.
For instance, 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' - make sure to use the exact same capitals (uppercase letters) as in your import statements.
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 solution.
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:
We run react on Windows and one of my developers saw this, but no one else had the issue.
I watched them open VS Code to a sub directory of the project, then did a cd to the project directory with lowercase (instead of the actual mixed case), then run npm start.
You could actually see the directory name in lowercase in the terminal as c:\someproject\somedir but in Windows explorer it is c:\SomeProject\SomeDir.
I was surprised the Windows command terminal allows you to do this.
回答6:
If you are using VS Code & you are doing "npm run dev" but that respective project folder isn't opened in VS Code then these 3 warnings will occur.
So the solution is: First open the respective project folder then only do "npm run dev"
回答7:
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.
回答8:
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");
回答9:
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.
回答10:
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.
回答11:
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.
回答12:
In my case (Win7, VSCode, Angular 6) the issue persist even after I have fixed the wrong case path everywhere. Looks like webpack cache the path somehow, so to solve it:
- Rename folder or file that causes problems to something different
- Build
- Got error
- Rename back
- Build
- Success
回答13:
I too had the same problem. I had navigated to a directory Trade_v3 , while the actual directory was Trade_V3. After changing the directory this error did not throw.
回答14:
The case of the letter drive also matter. In my case, Windows 10 had the upper case 'C' while I had lower case 'c' in the file.
回答15:
// 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'
Hope the two ways will solve your problem。
回答16:
I faced same problem in Vue.js. Eventually it turned out that I imported a component at two places with different namespaces.
import Step1 from '~/Components/Application/Step1'
import Step1 from './Step1'
Fixed it by changing second one to:
import Step1 from '~/Components/Application/Step1'
Hopefully it helps some of you...
回答17:
OMG I finally found the solution to my problem.
I am using the VS Code Terminal and it was using desktop instead of Desktop in the path of the prompt:
C:\Users\Hans\desktop\NODE JS\mysite>
To fix it, I just had to close the project folder and reopen it:
File -> Close Folder
File -> Open Folder
And now the VS Code Terminal is using the correct prompt path.
回答18:
Yes this happens if you use have used the same name but with case changed: for example, you have used
import React from 'React';
Instead of:
import React from 'react';
来源：https://stackoverflow.com/questions/47534267/webpack-there-are-multiple-modules-with-names-that-only-differ-in-casing-but