162

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

40 Answers 40

282

This is usually the result of a minuscule typo by wrongly using either an capital first letter or a lower case first letter when the opposite was needed.

For instance, if you are importing your modules like this:

import Vue from 'vue'

or:

import Vuex from 'vuex'

Go through your files and check where you used phrases like from 'Vue' or from 'Vuex' and make sure to use the exact same capitals (uppercase letters) as in your import statements.

Background:

The error basically says that there are multiple modules of a similar name only differing in casing in our code which seems to indicate that on the time you refer to your "import" module but don't use the correct casing, Vue will try to create another module with the aforementioned name difference yet both are pointing to the same module reference. So Vue could have been more resilient by jut ignoring the casing of the module reference name in our code.

What I explained has been the cause of my problem each time for this error on webpack commands.

8
  • 15
    You're right, it was the path name, not the module name, and that's what threw me. I had NavBar/MainMenuItemMobile.js—the 'b' in Navbar should have been lowercase.
    – achalk
    Dec 4, 2017 at 15:50
  • 6
    exacly dude, in my case I used React and trow error when I import: import React, { Component } from 'React'; to fix just from 'react
    – rflmyk
    May 9, 2018 at 1:34
  • 5
    My problem was that in one component I was referencing components/vue.js while in another I was referencing components/Vue.js
    – Dennis
    Aug 5, 2018 at 17:48
  • 2
    Just to add-- when I had this error, it was because my path in GitBash had a lowercase users where Webpack was expecting an uppercase Users. Aug 5, 2019 at 18:13
  • 2
    For anyone still running into this - a hint on how this sometimes happens - if you use Visual Studio Code and have added components or modules using the QuickFix feature, then that is likely where the casing went wrong - apparently VSCode does not honor the casing of the original path/file on case-sensitive OS (for me it was Mac)
    – huygir
    May 31, 2020 at 16:32
163
+50

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

7
  • I have a package that loads C: while the console is pointing at c:, I need to fix it somehow but I believe this has to do with it
    – clod986
    Mar 22, 2019 at 13:22
  • 1
    Wow....you just helped me out! I use Git bash on Windows primarily. I had the wrong casing, once I changed it, it worked. It's worth noting, the improper casing in Powershell will not result in the same errors, looks like the path is being converted to the appropriate case somewhere behind the scenes. Feb 7, 2020 at 19:24
  • 5
    I had this exact issue; however, having installed different packages at different times with different path casing, my node_modules folder was hosed. I deleted it completely, re-ran npm install and all the warnings went away.
    – Nate
    Feb 27, 2020 at 15:32
  • 1
    I had this exact issue also, after creating a new NextJS project, so I knew it had to be something I was doing wrong.
    – Greg M.
    May 19 at 15:56
  • 1
    I think you might be Bulgarian, like me. Anyway, your help has been really useful because I was having trouble running my Next.js 14 project on my Windows computer. I faced several problems that didn't happen on my MacBook. The project kept showing a "Hydration" error. It was because of the way I used camel case in my path string in the terminal. Nov 11 at 10:50
35

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.

3
  • This did solve my problem, thx
    – Derrick.X
    Nov 30, 2021 at 0:22
  • Thanks a lot. That was the exact same issue here after I renamed my "Hello-World" folder to "hello-world" and VS Code was internally still using "Hello-World". Jun 4, 2022 at 11:45
  • that helped my issue. thanks!
    – smcg
    Jun 26 at 15:13
31

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.

1
  • 1
    For me it was datatables.net-fixedheader (correct) instead of DataTables.net-fixedheader (wrong) on Windows 10. Sep 5, 2019 at 13:25
9

If you have this error in the link of next.js (into React):

import Link from 'next/Link'

INSTEAD OF

import Link from 'next/link'
1
  • This one CRUSHED me. Thank you! Oct 5, 2021 at 23:02
7

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.

1
  • 1
    This is because... windows file system is/was case insensitive. (was because in windows 10 you can set it to be case sensitive, I see)
    – Cody G
    Aug 12, 2019 at 13:11
6

What solved it for me (on next js) was to change the directory name to lower case:

From: /src/Components/NavBar/MainMenuItemMobile.js.

To: /src/components/navBar/MainMenuItemMobile.js.

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.

3

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';
3

this issue happens to me when I try to run npm start in vscode terminal on window machine. and the issue was /desktop/flatsome instead /Desktop/flatsome just change the path to Desktop with a capital D instead desktop with lowercase d in your vscode terminal

1
  • Thank you!. Was going crazy.
    – oyalhi
    Jul 24, 2020 at 16:33
2

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...

2

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"

1
// 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。

1

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'

2
  • The same happened to me, but with NextJS. I used webstorm, and usually it handles the refactor from upper-case to lower-case, but it did not - and the app kept refreshing. Feb 3, 2022 at 3:56
  • sometimes the idea doesn't cooperate that well.
    – Blessing
    Feb 3, 2022 at 13:54
1

I was facing this issue in a NextJS project, but only when I use Launch via NPM configuration in VS Code Debugger - launch.json. When I was manually running npm run dev or next dev it was working fine.

After some exploration I realized that I need to add "cwd": "${workspaceFolder}", in the configuration for it to detect the current working diretory properly.

Below is the working configuration for my NextJS project.

    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "dev"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "type": "pwa-node"
    }
0

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.

0

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

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.

0

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.

0

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.

0

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
0

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.

0

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.

0

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.

0

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.

0

The same issue happened to me, try this cli git config --global core.ignorecase false. It might be the case sensitive config set by Git. Everything runs without any warning after that for me.

0

If anyone is stumbling across this issue whilst using vue-styleguidist then this github issue fixed things for me.

0

We hit this with webpack. When passing entry to webpack, we were using path.resolve("./abc.ts"). This was resolving relative bath based on current terminal path. We solved this by resolving path relative to current directry instead. path.resolve(__dirname, './abc.ts');

0

In my case I had two imports by mistake like this:

import './Component.module.css'
import styles from './Component.module.css'
0

I'm using Jetbrains Webstorm (on Windows) and the path to my package.json in my Run configuration has the wrong capitalization.

~\Projects\x\XWebsite\package.json

->

~\projects\x\XWebsite\package.json

Not the answer you're looking for? Browse other questions tagged or ask your own question.