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

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.

Leave a Comment