How do I disable or avoid webpack warnings about differently cased drive letters when building from VSCode?

Question

I have a project that is built using webpack and I use VS Code to edit it. Whenever I build the project from OUTSIDE of VS Code, the webpack build succeeds without any warnings. However, when I build from WITHIN VS code (e.g. either through a build command in tasks.json or from a PowerShell prompt from withing VS Code), I get many webpack warnings that look like this:

WARNING in (webpack)/buildin/module.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:
* D:\Users\<name>\Source\Repos\<name>\<name>\node_modules\source-map-loader\index.js!D:\Users\<name>\Source\Repos\<name>\<name>\node_modules\webpack\buildin\module.js
Used by 2 module(s), i. e.
....
* D:\Users\<name>\Source\Repos\<name>\<name>\node_modules\source-map-loader\index.js!d:\Users\<name>\Source\Repos\<name>\<name>\node_modules\webpack\buildin\module.js
Used by 1 module(s), i. e.
....

You might notice that the only way they differ is in the casing of the drive letter (D vs d). This is what I've gathered about the issue:

1. When I start a cmd prompt, the d is lower-case and webpack does not complain.
2. If I run from with VS code, webpack complains because VS Code intentionally upper-cases the drive letter in its ${workspaceRoot} variable and elsewhere. You can find many references to fixes and problems related to this behavior on this issue thread.
3. There has been much discussion about how webpack also has had trouble with cases where the drive letter was differently cased. One example is here. There are other places that talk about it, and how NodeJs also has troubles like this.

The problem is that I don't know how to fix the situation. I don't seem to be able to change what VS Code does with its drive letters. I haven't found any recent issues on webpack about the issue (the link I posted above is from 2017). As far as I can tell, there's no way to tell webpack to suppress this particular warning (it doesn't even have a warning number associated with it).

What is the best way to address this issue now?

Thanks!

Answer 1

I'm on a Windows machine and I have this problem, too. Webpack warns against inconsistencies in path capitalization. It's a VS Code issue where, when the terminal is called programmatically, VS Code uses a lowercase drive letter. For me, it didn't matter what terminal, it would always be a lowercase c:. What I did to fix it is was add a bash command to my webpack npm scripts to uppercase the drive letter before executing the main command. It looks for occurences of /c/ and replaces them with /C/. Note that this is specific to bash. The is a windows cmd equivalent, but I haven't posted it here. The bash command to upper-case the path is:

wd=`pwd`;cd ${wd/\/c\//\/C\/}

Now, to get it to run in your npm script the command must be modified to account for the double quotes and escaping. In your with your npm scripts it should look like:

"watch": "wd=`pwd`;cd \"${wd/c/C}\" && webpack --config ./webpack.dev.config.js",

or

"build": "wd=${pwd};cd \"${wd/c/C}\" && webpack --config ./webpack.prod.config.js "

Then, when you run npm run watch or npm run build it uppercases the path for you and then proceeds with webpack.

Note that this won't fix any legitimate capitalization issues that you may have. You'll still have to check your code manually those.