"There are multiple modules with names that only differ in casing"

[dyh333]

i cloned one project to local and npm install, npm start. but found below warning.
my dev environment is in windows 10 system

WARNING in (webpack)/buildin/module.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:

• E:\GitHub\angular2-webpack-starter\node_modules\webpack\buildin\module.js
  Used by 2 module(s), i. e.
  E:\GitHub\angular2-webpack-starter\node_modules\punycode\punycode.js
• e:\GitHub\angular2-webpack-starter\node_modules\webpack\buildin\module.js
  Used by 1 module(s), i. e.
  e:\GitHub\angular2-webpack-starter\node_modules\rxjs\util\root.js

[inska]

Same here

[junyun0516]

me too ㅠㅠ

[Junik]

If u use VS Code try change path to project from
c:[path to angular2-webpack-starter]
to
C:[path to angular2-webpack-starter]

in @dyh333 case fix:
e:\GitHub\angular2-webpack-starter> cd E:\GitHub\angular2-webpack-starter
npm start
in your terminal or cli

[PatrickJS]

/\ this is an OS (windows) problem. Please see the solution above via @Junik

[alvipeo]

@gdi2290 well, there are lots of us...

[PatrickJS]

this is a problem with node.js and windows so I can't do anything about it. you just need to make sure you cd with the correct path

[aminebizid]

On Windows, stop naming files with upper case. Here we use kebab case

[luchillo17]

I'm having almost the same warning except it's in Mac:

WARNING in ./~/rxjs/add/operator/map.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/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/string-replace-loader/index.js?{"search":"var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);","replace":"var sourceMappingUrl = \"\";","flags":"g"}!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/Rxjs/add/operator/map.js
    Used by 1 module(s), i. e.
    /Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/string-replace-loader/index.js?{"search":"var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);","replace":"var sourceMappingUrl = \"\";","flags":"g"}!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/Rxjs/Rx.js
* /Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/string-replace-loader/index.js?{"search":"var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);","replace":"var sourceMappingUrl = \"\";","flags":"g"}!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/rxjs/add/operator/map.js
    Used by 1 module(s), i. e.
    /Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/@angularclass/hmr-loader/index.js?pretty=true&prod=false!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/awesome-typescript-loader/dist/entry.js!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/angular2-template-loader/index.js!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/node_modules/string-replace-loader/index.js?{"search":"(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)","replace":"$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)","flags":"g"}!/Users/aplicaciones2/Documents/Luchillo-tech-showcase/src/vendor.browser.ts

That one error is repeated aprox 52 times with different rxjs operators.

So as this happens to me in Mac OSX 'El Capitan', i don't think my issue is with the cd used, any ideas?

Update: After some digging it happens whenever i import the Rxjs Observable, it seems the string-replace-loader used in the preLoader config in the webpack.common.js file is responsible for that issue.

[luchillo17]

Ok found my issue, i'm importing like:

import { Observable } from 'Rxjs/Observable';
import { Subscription } from 'Rxjs/Subscription';
import 'Rxjs/add/operator/debounceTime';
import 'Rxjs/add/observable/fromEvent';

When it should be like:

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/observable/fromEvent';

Note the upper case R in rxjs.

[buddyackerman]

@Junik this fix didn't work for me as my path was already set with an upper case drive letter. Is the casing in the path critical as well? I have mixed case in the folders of the path to my project directory.

e.g. C:\Projects\Angular2\Blah\MyProject

[MarkPieszak]

@buddyackerman I just ran into this on one of my machines and realized I was using Node 6.4, I upgraded to 7.1 and the issues went away, could of been the way I was doing the directory as well, but I believe this has been fixed on the Node end (see nodejs/node#6624)

[karocksjoelee]

I've encountered this issue today , I solve by checking the import components url . In my case is XXX.module.ts & XXX.routing.ts . the url after you import { Anyting } must all in lower case .

Enviroment: MacOS , node 6.9.1

[Vishal-vash]

In my code I resolved this issue by updating:

import { Component, OnInit } from '@angular/Core'
to
import { Component, OnInit } from '@angular/core'

[Babazon]

This is usually a result of a miniscule typo. If you are importing your modules like import angular from 'angular', import React from 'react' => Go through your files and check where you used < from 'React'> or <from 'Angular'> The error descriptions should have been written more clearly, but what I explained has been the cause of my problem each time I for this error on webpack commands.

[protoEvangelion]

@Babazon For me I had capitalized Radium like this: import Radium from 'Radium' when I should have imported it like this: import Radium from 'radium'

The error went away.

[mengdu]

这个应该是命令行的问题，我也遇到的，我今天改了cmder的启动路径
cmd /k "%ConEmuDir%\..\init.bat" -new_console:d:e:\
然后也出现了类似的问题

* E:\lanyue\vue\admin-customer\node_modules\.2.2.1@webpack\buildin\global.js
    Used by 1 module(s), i. e.
    E:\lanyue\vue\admin-customer\node_modules\.2.2.1@vue\dist\vue.esm.js
* e:\lanyue\vue\admin-customer\node_modules\.2.2.1@webpack\buildin\global.js
    Used by 2 module(s), i. e.
    e:\lanyue\vue\admin-customer\node_modules\echarts\lib\echarts.js

原来是这个盘符写成小写了，于是我改成大写就好了

cmd /k "%ConEmuDir%\..\init.bat" -new_console:d:E:\

[birjitningomba]

Looks like anything after @angular in import statements should be in lower case.
e.g. @angular/core, @angular/router

Sometimes if you type @angular/Core or @angular/Router you may get this error. So check all the places where you have import @angular for incorrect case.

To be more specific you may want to check all your import statements and check if it maps to whatever inside the node_modules folder.

Please refer above comments "luchillo17 commented on Sep 13, 2016"

[namdeom]

I could resolve the issue after making all folder name small.Earlier I was using camel case and it was failing.

[zjh65204]

原来不是我一个人遇到这个问题！

[fygethub]

我也遇到了 发现就是一个import 路径的一个字母大小写写错了。

i got the issue like :

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/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/Course/CourseList.jsx
    Used by 1 module(s), i. e.
    /Users/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/Course/CourseMore.jsx
* /Users/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/course/CourseList.jsx
    Used by 3 module(s), i. e.
    /Users/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/home/Home.jsx

found my issue, i'm importing like:

//CourseList
import CourseMore from './component/Course/CourseMore.jsx';

the right is like：

//CourseList
import CourseMore from './component/course/CourseMore.jsx';
due to the 'c'

[fygethub]

我也遇到了 发现就是一个import 路径的一个字母大小写写错了。

i got the issue like :

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/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/Course/CourseList.jsx
    Used by 1 module(s), i. e.
    /Users/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/Course/CourseMore.jsx
* /Users/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/course/CourseList.jsx
    Used by 3 module(s), i. e.
    /Users/fydor/Desktop/work/CongZhi/wex-front/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/fydor/Desktop/work/CongZhi/wex-front/app/component/home/Home.jsx

found my issue, i'm importing like:

//CourseList
import CourseMore from './component/Course/CourseMore.jsx';

the right is like：

//CourseList
import CourseMore from './component/course/CourseMore.jsx';
due to the 'c'

[Shenchuanhuan]

I also met this problem today.
I solved it by using @luchillo17 's method.
My system is macOS Sierra 10.12.6

[luchillo17]

@Shenchuanhuan Nice 😄.

[maccurt]

I solved it by using @luchillo17 's method.

[sanazBG]

Using react .. It doesn't matter how you type the drive letter .. Any folder in my server directory(including the server directory) should be typed with small letters .. that fixed the warning for me and got a "Compiled Successfully" absolutely every warning came from my "client" directory .. thats on Windows.

[benjamin21st]

This is not just a windows-issue, I had the same issue on Mac when I wrote:

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/Observable/of';

Notice that I used uppercase "O".

I fixed with

import { Observable } from 'rxjs/observable';
import { of } from 'rxjs/observable/of';

And it worked :)

[yussan]

i solved my warning the same as above by removing the file/folder name using capital to lowercase.

[jazzfog]

I had this issue on Windows and it was a funny one:

First I noticed that difference in case was in my path to my dev folder, not in app itself

d:\Web\JavaScriptApps\MyApp\node_modules\webpack\buildin\global.js
vs
d:\web\JavaScriptApps\MyApp\node_modules\webpack\buildin\global.js

Web folder is capital in first case, though real folder name is web.

Initially I thought that there is something wrong with Webpack or Node path resolver but later I noticed that path showing in the console window I was working in is actually d:\Web\...

Obviously it was wrong and as I opened new console with correct path - everything was fine with my app.

So I started to think how could it happen and I found that one of the shortcuts in my environment had wrong target path d:/Web/... because I copied it from my older desktop where web folder had actually capitalized name Web. So I got this wrong context and it confused the node app.

[dengshenkk]

I found this to be the result of a mix of windows and Mac development

[smoetje]

I have the same issue, it came just "out of the blue" without any reason. It worked fine until yesterday evening. Working on Windows 10 with latest node, npm & git bash. It was rather frustrating... Even tried to pull and start from my (original) master branch, it just persists.
I however got it back to work without these warnings when using the windows command, instead of git bash. Interesting enough in my case, I work on Windows (7 & 10) only (no mac over here)....

warning  in C:/Users/nicol/LaravelProjects/oostendezingt/node_modules/webpack/buildin/global.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:
* C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\webpack\buildin\global.js
    Used by 2 module(s), i. e.
    C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\punycode\punycode.js
* C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\webpack\buildin\global.js
    Used by 2 module(s), i. e.
    C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\vue\dist\vue.runtime.esm.js

 warning  in C:/Users/nicol/LaravelProjects/oostendezingt/node_modules/webpack/buildin/module.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:
* C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\webpack\buildin\module.js
    Used by 1 module(s), i. e.
    C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\punycode\punycode.js
* C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\webpack\buildin\module.js
    Used by 1 module(s), i. e.
    C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\lodash\lodash.js

 warning  in C:/Users/nicol/LaravelProjects/oostendezingt/node_modules/webpack/hot/emitter.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:
* C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\webpack\hot\emitter.js
    Used by 1 module(s), i. e.
    C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\webpack-dev-server\client\index.js?http://localhost:8080
* C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\webpack\hot\emitter.js
    Used by 1 module(s), i. e.
    C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\webpack\hot\dev-server.js

 warning  in C:/Users/nicol/LaravelProjects/oostendezingt/node_modules/webpack/hot/log.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:
* C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\webpack\hot\log.js
    Used by 1 module(s), i. e.
    C:\Users\nicol\LaravelProjects\oostendezingt\node_modules\webpack\hot nonrecursive /^\.\/log$/
* C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\webpack\hot\log.js
    Used by 2 module(s), i. e.
    C:\Users\nicol\Laravelprojects\oostendezingt\node_modules\webpack\hot\dev-server.js````

[BayuP]

i have same problem here when i create new react app this is always appear even when i open my old project i already use lowercase and i didnt know how to fix it

[YvonneD]

I think the reason is when you cd to the project file ,the name have Capital issue,such as you want to cd to your desktop,you should check the folder name in your computer,lower case or upper case.
My computer is "Desktop",so I should type "cd ~/Desktop/projectname". Then it should be all done.

[HiIcy]

I have same problem here,but I am in Vue O(∩_∩)O. @mengdu 感谢，我也是用的cmder 发现竟然是盘符问题呜呜，给跪了

[wenxiayili]

@namdeom it resolve my problem too...

[ghost]

I solved by moving the files that have the problem into another directory

• then I checked for uppercase if I found some files with uppercase I renamed this files to lower case
• and then i paste the files back again.

[zhuy2018]

我也遇到这个问题了
warning in F:/Web/vue-cli/vue-examplel/node_modules/webpack/buildin/global.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:

• F:\Web\vue-cli\vue-examplel\node_modules\webpack\buildin\global.js
  Used by 2 module(s), i. e.
  F:\Web\vue-cli\vue-examplel\node_modules_sockjs-client@1.1.4@sockjs-client\dist\sockjs.js
• f:\Web\vue-cli\vue-examplel\node_modules\webpack\buildin\global.js
  Used by 1 module(s), i. e.
  f:\Web\vue-cli\vue-examplel\node_modules\vue\dist\vue.esm.js

应该怎么解决的？？

[zhuy2018]

我解决了，原来不是盘符原因，只要把文件删除了，然后重新导入就OK。
这坑踩的深，后面人跳过此坑！！！！！！！

[PietroLaGrotta]

Simply if you capitalize a file name that is already imported in ather files of you project, node js explodes. It become creazy. I returned the file name to lowercase and node js is returned to run happily :-)

[davidqqq]

我解决了，原来不是盘符原因，只要把文件删除了，然后重新导入就OK。
这坑踩的深，后面人跳过此坑！！！！！！！

This tip actually helped me and would like to translate in English to help people who might need it.

Here it goes:

I solved it. It wasn't caused by drive letter. Remove the problematic file and reimport it. It should be OK now.

[Tech007Harsh]

WARNING in ./node_modules/@Angular/common/fesm5/http.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:

• F:\CodeLoverTechnology\Development\Web_Development\NirmanIASWeb\NirmanIASPortal\node_modules@Angular\common\fesm5\http.js
  Used by 16 module(s), i. e.
  F:\CodeLoverTechnology\Development\Web_Development\NirmanIASWeb\NirmanIASPortal\node_modules@ngtools\webpack\src\index.js!F:\CodeLoverTechnology\Development\Web_Development\NirmanIASWeb\NirmanIASPortal\src\app\app.module.ts* F:\CodeLoverTechnology\Development\Web_Development\NirmanIASWeb\NirmanIASPortal\node_modules@angular\common\fesm5\http.js
  Used by 4 module(s), i. e.
  F:\CodeLoverTechnology\Development\Web_Development\NirmanIASWeb\NirmanIASPortal\node_modules@ngtools\webpack\src\index.js!F:\CodeLoverTechnology\Development\Web_Development\NirmanIASWeb\NirmanIASPortal\src\app\Services\SubCategoryService\sub-category-master.service.ts

[Tech007Harsh]

i am also encountering this problem.. i have services to post and get, two of them are working fine but others are not and showing 400 bad request ... but nothing is wrong in the code..i think i am encountering unexpected behavior while compiling,i am posting other service and the source is showing other html and hence giving 400 bad request.

[Isaquedias]

No meu caso eu tinha uma pasta
/Pages
troquei por
/pages

coloquei em minusculo

[ivan-nemtinov]

Webpack shows a warning "There are multiple modules with names that only differ in casing" when executed from a terminal of VSCode on Windows, and a default shell of a Terminal is "Command prompt", which uses small letters for drive names.
Solution:

1. In VSCode, open command palette (CTRL+SHIFT+P)
2. Enter a command "Terminal: Select default shell"
3. Choose Powershell or Bash.

[const-int]

In my case it was lowercase user folder in the path.

I changed C:\users\admin\project to C:\Users\admin\project and it works fine.

Windows 10, PowerShell

[vuongvgc]

If u use VS Code try change path to project from
c:[path to angular2-webpack-starter]
to
C:[path to angular2-webpack-starter]

in @dyh333 case fix:
e:\GitHub\angular2-webpack-starter> cd E:\GitHub\angular2-webpack-starter
npm start
in your terminal or cli

thanks. This is my issue. So i can fix.

[ShahriarKh]

Had the same problem in a react project.
Solution: I was naming a css file in camelCase 😑

[wallace-lw]

I had the same issue, i just fix renaming the import: Import React, {ReactNode} from 'React'; to Import React, {ReactNode} from 'react;

[naveenmorla1901]

I changed my project path
ex: C:\Users\name\documents\project\ to C:\Users\name\Documents\Project
Check for the original format in the folder location and try changing it.