Mysterious Errors: Case Sensitive Webpack Error

Recently while working with Webpack, I saw this error.

WARNING in ./app/components/students.js
There is another module with an equal name when case is ignored. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.
WARNING in ./app/components/Students.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

It seems self-explanatory. But you’ll still see these errors even if you do not have files with the same name in upper and lower case.

This error isn’t caused by how your files are named, but by import statements. You're likely using import on a file in the lower case while the file is actually named uppercase (or vice-versa).

import students from './components/Students.js'
... elsewhere in your program
import students from './components/students.js' 

The simple fix is to check all of your file imports.

Hope this saves you some troubleshooting time!


Originally published at gist.github.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.