File name differs from included file name only in casing

avatar

Borislav Hadzhiev

Last updated: Mar 20, 2022

banner

Photo from Unsplash

File name differs from included file name only in casing #

The error "File name differs from already included file name only in casing" occurs when we have two files with the same name, but different casing or rename a file and our IDE glitches. To solve the error, make sure no two files only differ in casing and restart your IDE.

file name differs only in casing

Here is an example of how the error occurs.

index.ts
// Error: File name '/home/borislav/Desktop/typescript/src/Index.ts' // differs from already included file name // '/home/borislav/Desktop/typescript/src/index.ts' only in casing. import { country } from './Index'; console.log(country);

This is a file called index.ts which imports from a file called Index.ts (capital I) in the same directory.

If this is the cause for the error in your project, make sure to rename one of the files, as the names of 2 files in the same directory cannot only differ in casing, e.g. myFile.ts and MyFile.ts.

Another common cause of the error is when we rename a file to use a different casing and our IDE glitches (VSCode often needs a restart).

For example if you rename myFile.ts to MyFile.ts, your code editor might not be able to tell that it's the same file.

Do a full restart of the IDE, as reloading the VSCode window doesn't get the job done most of the time.

After a restart, your IDE should be able to pick up that there aren't two files with the same name in the same directory.

If that doesn't help try restarting your TS server as well.

The error also occurs if you have an import path with the wrong casing.

index.ts
import { country } from './myFile'; import { country } from './MyFile';

The two import statements do the same on Windows machines because file names on Windows are case-insensitive.

However, if you run this code on a Unix-like operating system like Linux or macOS, you would get an error, because they treat file names case-sensitively and these are 2 completely different files.

Make sure the path in your import statement doesn't have an incorrect casing.

If none of the suggestions work, try renaming the specific file to a placeholder name like placeholder.ts and then renaming it back to the original name.

Sometimes this helps the IDE realize that there aren't two files with the same name, but inconsistent casing.

A best practice is to use the forceConsistentCasingInFileNames option in your tsconfig.json file.

tsconfig.json
{ "compilerOptions": { "forceConsistentCasingInFileNames": true, // ... } }

When the forceConsistentCasingInFileNames option is set to true, TypeScript will issue an error if you try to include a file by using a different casing from the casing of the file name on the disk.

For example, if you try to import from MyFile.ts, but the name of the file is myFile.ts, you'd get an error.

When this option is set to false, TypeScript follows the case sensitivity rules of the file system it's running on.

This can be very confusing if some of the developers on your team use Windows machines and other Unix-like OS, because if you try to import myFile.ts by specifying MyFile.ts, it will be found on Windows, but not on macOS or Linux.

Conclusion #

The error "File name differs from already included file name only in casing" occurs when we have two files with the same name, but different casing or rename a file and our IDE glitches. To solve the error, make sure no two files only differ in casing and restart your IDE.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.