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

check this out, it might solve your problem https://stackoverflow.com/questions/61054565/particles-js-not-showing-up-in-reactjs-project — Sarthak Saklecha, Aug 28 '20 at 09:12

matthiku · Accepted Answer · 2023-04-12T05:58:10.533

280

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.

edited Apr 12 '23 at 05:58

answered Dec 04 '17 at 11:24

matthiku

3,610
1
15
21

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 04 '17 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 09 '18 at 01: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 05 '18 at 17:48
Your comment @ adc17 helped me understand the cryptic output. Read this solution in the WebPack GitHub Wiki and just couldn't make sense of it as everything looked correct. It's amazing how close 'l' looks like 'L' when you have text set very small...hehe. – Guy Park Aug 18 '18 at 05:19
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`. – sleepy_daze Aug 05 '19 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 '20 at 16:32
same fix for nextjs image import if someone have the same issue its "next/image" no "next/Image" note the i – Yersskit Oct 31 '21 at 17:17
1

for me it was because I used the same folder name "layout" in different directories – wongz Feb 13 '22 at 03:42

Dimitar Dimitrov · Answer 2 · 2019-09-13T09:30:50.700

162

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

edited Sep 13 '19 at 09:30

answered Dec 23 '18 at 04:35

Dimitar Dimitrov

14,868
8
51
79

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 '19 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. – Ryan Eastabrook Feb 07 '20 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 '20 at 15:32
Yup. On the console I had "cd"-ed into the folder that had the package.json file. To arrive there, I typed "cd clientapp". The true casing on the name is ClientApp. The warning text was displaying paths that included ClientApp as part of the path "helpfully" pointing out that I had chosen a path that included "clientapp" in the path. File under "you can completely ignore this warning". – StackOverflowUser May 24 '20 at 23:20
Wow... so much time sunk into this and this was it! Funny I've been leaning on the convenience of terminal paths being case-insensitive without issue until now. – Methodician Jul 09 '20 at 22:01
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 '23 at 15:56

score 35 · Answer 3 · answered Oct 13 '19 at 08:00

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.

answered Oct 13 '19 at 08:00

felipe

1,241
1
9
5

This did solve my problem, thx – Derrick.X Nov 30 '21 at 00: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". – ShadowGames Jun 04 '22 at 11:45
that helped my issue. thanks! – smcg Jun 26 '23 at 15:13

score 31 · Answer 4 · answered Jan 14 '19 at 14:25

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.

answered Jan 14 '19 at 14:25

Ahmed Adewale

2,943
23
19

1

For me it was `datatables.net-fixedheader` (correct) instead of `DataTables.net-fixedheader` (wrong) on Windows 10. – Jonas Gröger Sep 05 '19 at 13:25

score 9 · Answer 5 · answered Oct 08 '20 at 20:08

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'

answered Oct 08 '20 at 20:08

Mohammad Fallah

976
11
14

This one CRUSHED me. Thank you! – barrylachapelle Oct 05 '21 at 23:02

score 7 · Answer 6 · answered May 14 '19 at 02:29

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.

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 Ｇ, Aug 12 '19 at 13:11

score 6 · Answer 7 · edited May 03 '21 at 13:05

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.

edited May 03 '21 at 13:05

TUTAMKHAMON

600
3
9

answered May 01 '21 at 19:28

Shawn Jewel

61
1
2

score 4 · Answer 8 · answered Nov 20 '18 at 14:11

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.

score 3 · Answer 9 · edited Oct 23 '19 at 22:04

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

edited Oct 23 '19 at 22:04

TheMisir

4,083
1
27
37

answered Jun 03 '19 at 09:30

Jitendra Pal - JP

242
2
9

score 3 · Answer 10 · answered May 21 '20 at 19:07

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

answered May 21 '20 at 19:07

Ndatimana Gilbert

279
3
5

Thank you!. Was going crazy. – oyalhi Jul 24 '20 at 16:33

score 2 · Answer 11 · answered Jun 26 '19 at 10:25

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

score 2 · Answer 12 · answered Jul 04 '19 at 10:03

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"

answered Jul 04 '19 at 10:03

Shashank Shekhar Barik

51
1
3

score 1 · Answer 13 · answered Jun 05 '19 at 07:16

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。

answered Jun 05 '19 at 07:16

Qian

11
1

score 1 · Answer 14 · answered Nov 23 '20 at 09:27

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'

answered Nov 23 '20 at 09:27

Blessing

2,450
15
22

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. – Bharadwaj Giridhar Feb 03 '22 at 03:56
sometimes the idea doesn't cooperate that well. – Blessing Feb 03 '22 at 13:54

score 1 · Answer 15 · answered Dec 22 '21 at 18:35

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"
    }

aermin · Answer 16 · 2018-11-15T12:33:59.543

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.

score 0 · Answer 17 · answered Dec 27 '18 at 10:28

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

score 0 · Answer 18 · answered Jan 29 '19 at 16:33

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.

answered Jan 29 '19 at 16:33

Josh G

644
7
21

score 0 · Answer 19 · answered Mar 04 '19 at 11:52

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.

answered Mar 04 '19 at 11:52

Rishabh Jain

169
1
9

score 0 · Answer 20 · answered Mar 19 '19 at 19:20

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.

answered Mar 19 '19 at 19:20

httpete

2,765
26
34

score 0 · Answer 21 · answered Apr 24 '19 at 13:57

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

score 0 · Answer 22 · answered May 22 '19 at 16:46

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.

answered May 22 '19 at 16:46

Raja Sekar

89
1
2

score 0 · Answer 23 · answered May 25 '19 at 20:13

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.

answered May 25 '19 at 20:13

icernos

395
3
6

score 0 · Answer 24 · edited Apr 20 '20 at 02:45

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.

edited Apr 20 '20 at 02:45

colidyre

4,170
12
37
53

answered Apr 19 '20 at 19:57

Chen Peleg

953
10
16

score 0 · Answer 25 · answered Aug 28 '20 at 10:07

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.

score 0 · Answer 26 · edited Jan 19 '21 at 18:06

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.

edited Jan 19 '21 at 18:06

Sabito stands with Ukraine

4,271
8
34
56

answered Jan 18 '21 at 00:20

Zulhilmi Ahmad

1
1

score 0 · Answer 27 · answered Feb 18 '21 at 02:40

0

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

answered Feb 18 '21 at 02:40

Giles Butler

971
3
14
23

score 0 · Answer 28 · answered Mar 06 '21 at 00:18

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

score 0 · Answer 29 · answered Apr 05 '21 at 08:33

0

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

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

answered Apr 05 '21 at 08:33

tudorprodan

950
8
18

score 0 · Answer 30 · edited Jan 02 '23 at 10:11

0

I have updated below code changes and it wotked for me: from: import {Observable} from 'rxJS'; to: import {Observable} from 'rxjs';

edited Jan 02 '23 at 10:11

Badrinath Ajabe

3
3

answered May 29 '21 at 17:53

nuryhan

9
3

score 0 · Answer 31 · answered Jun 17 '21 at 10:33

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

answered Jun 17 '21 at 10:33

lorilew

93
6

score 0 · Answer 32 · edited Oct 27 '21 at 07:50

0

I personnally fixed the issue by replacing import axios from 'Axios'; to import axios from 'axios';

edited Oct 27 '21 at 07:50

Staxlinou

1,351
1
5
20

answered Oct 25 '21 at 09:29

zhuizhu nage

21

Please don't add "thank you" as an answer. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation), you will be able to [vote up questions and answers](https://stackoverflow.com/help/privileges/vote-up) that you found helpful. - [From Review](/review/late-answers/30169723) – Emi OB Oct 25 '21 at 10:41
This is the same solution as in most of the other answers. Yes, capitalization matters. No need to post new examples. – Eric Aya Oct 25 '21 at 12:07

score 0 · Answer 33 · answered Nov 21 '21 at 19:51

0

For me it was moving components folder outside pages. Such a silly one.

answered Nov 21 '21 at 19:51

score 0 · Answer 34 · answered Apr 24 '22 at 17:07

0

I had same problem. I think it's about permission. If you are trying the run app at c:/dev/../projectfolder, probably it's not work. But if you will try the run app at c:/user/../projectfolder/, it's working mate.

answered Apr 24 '22 at 17:07

sergin

56
4

score 0 · Answer 35 · answered May 23 '22 at 15:37

I had an issue with this as well. I normally run Node/etc. on a Fedora machine but needed to run it on Windows Server.

After 30 minutes of scratching my head, wondering why it was crashing, it came down to this:

c:\myproject\

Instead of:

C:\myproject\

Notice the difference?

I miss Fedora already. So I believe it's suggested to use WSL if you're deploying on Windows.

score 0 · Answer 36 · answered Aug 09 '22 at 03:12

0

Had the same issue with nextjs. In nextjs check how you're importing Link and Image in my case, I was importing Image as Image from "next/Image" instead of import Image from "next/image" After update, the error is gone.

answered Aug 09 '22 at 03:12

Kevin Nyarang'o

113
1
8

score 0 · Answer 37 · answered Nov 13 '22 at 15:22

In my case I was importing a JSON file - with the original case size, eg.

const data = require('../data/translations-en-GB.json'); // original file case size

and it was throwing the warning:

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

I changed it to

const data = require('../data/translations-en-gb.json'); // required case size

(entire file name lower case) and the warning went away.

score 0 · Answer 38 · answered Feb 02 '23 at 14:06

I ran into this issue when I linked some library locally using npm link and apparently I changed the casing of a folder after that (despite I cannot remember why I would do that).

Unlinking the library using npm rm [library] and linking it again using npm link [path/to/library] fixed the issue for me.

score 0 · Answer 39 · answered Jul 09 '23 at 05:49

0

For me this was a casing issue, but in the entry section of webpack.config.js file. I had

entry: {
    app: "./scripts/app.ts"
}

instead of (upper case S)

entry: {
    app: "./Scripts/app.ts"
}

answered Jul 09 '23 at 05:49

James Poulose

3,569
2
34
39

score 0 · Answer 40 · answered Jul 23 '23 at 18:31

0

I had this issue on a Gatsby project, I was wrongly importing the components.

To fix this just to be sure to using import them like this:

import Layout from "../components/Layout"
import Seo from "../components/Seo"

answered Jul 23 '23 at 18:31

ahmnouira

1,607
13
8

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

40 Answers40

Linked

Related