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 a         


        

Answer 1

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 2

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 3

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 4

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 5

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