Reputation: 3449

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

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?

Upvotes: 166

Answers (30)

ahmnouira

Reputation: 3401

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"

Upvotes: 2

James Poulose

Reputation: 3835

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

Upvotes: 0

matthiku

Reputation: 3730

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.

Upvotes: 291

Grochni

Reputation: 1851

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.

Upvotes: 0

nuryhan

Reputation: 9

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

Upvotes: 0

nickornotto

Reputation: 2156

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.

Upvotes: 0

Kevin Nyarang'o

Reputation: 163

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.

Upvotes: 0

cbmeeks

Reputation: 11410

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.

Upvotes: 0

sergin

Reputation: 66

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.

Upvotes: 1

Gangula

Reputation: 7284

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

Upvotes: 1

user14261498

Reputation:

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

Upvotes: 0

zhuizhu nage

Reputation: 21

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

Upvotes: 0

lorilew

Reputation: 103

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

Upvotes: 0

Shawn Jewel

Reputation: 61

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.

Upvotes: 6

tudorprodan

Reputation: 965

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

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

Upvotes: 0

Sujith Kumar

Reputation: 1

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

Upvotes: 0

Giles Butler

Reputation: 1001

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

Upvotes: 0

Zulhilmi Ahmad

Reputation: 1

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.

Upvotes: 0

Blessing

Reputation: 2720

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'

Upvotes: 1

Mohammad Fallah

Reputation: 1110

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'

Upvotes: 9

d13

Reputation: 10077

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.

Upvotes: 0

Ndatimana Gilbert

Reputation: 329

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

Upvotes: 3

Chen Peleg

Reputation: 2034

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.

Upvotes: 0

Jitendra Pal - JP

Reputation: 242

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

Upvotes: 3

felipe

Reputation: 1331

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.

Upvotes: 36

Dimitar Dimitrov

Reputation: 15138

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

Upvotes: 166

Shashank Shekhar Barik

Reputation: 51

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"

Upvotes: 2

Sandip Mane

Reputation: 1623

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

Upvotes: 2

Qian

Reputation: 11

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

Upvotes: 1

icernos

Reputation: 405

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.

Upvotes: 1

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

Answers (30)

Related Questions

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