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?

Answer 1

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.

Answer 2

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'

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

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

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.

Answer 12

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.

Answer 13

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

Answer 14

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

Answer 15

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 16

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

Answer 17

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

Answer 18

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"

Answer 19

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.

Answer 20

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

Answer 21

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

Answer 22

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

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

Answer 23

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.

Answer 24

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

Answer 25

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.

Answer 26

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

Answer 27

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"

Answer 28

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 29

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 30

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 31

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.

Answer 32

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.

Answer 33

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.

Answer 34

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

Answer 35

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

Answer 36

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

Answer 37

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

Answer 38

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.

Answer 39

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.

Answer 40

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.