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

Question

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.

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

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.

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.

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.

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.