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

Question

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 a         


        

Answer 1

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

Answer 2

Same issue happened to me, because I changed the name of my project folder to "Myclass", and in git bash it was "myclass" for some reason. When I changed to lower "m", the message stopped.

Answer 3

I had the same problem and then found out that my vue file was named in lowercase like this: event.vue. To solve it I renamed it to Event.vue and updated where I was importing it and then it worked. For the import statement it looked like this:

Before

import Event from '@/components/NewsAndEvents/event' After renaming the file it must look like this:

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

Answer 4

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

Answer 5

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.

Answer 6

None of these solutions worked for me. What did was:

• Delete the problematic files (but make a backup of them somewhere else!).
• Commit the change to Git.
• Add the same files again from your backup.
• Commit the new files to Git ... problem solved!

In my case I had simply changed the capitalisation of my file names containing the imported modules. They were showing up as lower-case in the file system (OSX Finder, Bash) and in the code editor (VS Code). However, opening the files in VS code was still showing me the old file name in the code editor tab. I tried completely deleting the files and then re-adding them. This didn't work - the newly added files were still displaying the old names in the editor tabs, and my builds were still breaking.

Then after a few hours of futile fix attempts I discovered that Git does not regard changes to file capitalisation as changes, so it never actually changed those file names:

How do I commit case-sensitive only filename changes in Git?

So I deleted the problematic files, committed to Git, re-add them and re-committed - and it worked. No warnings and the build errors disappeared.