File name differs from included file name only in casing

# 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

Copied!
// 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.

# Restart your code editor

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

# Having an import path with the wrong casing

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

index.ts

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

I've written a detailed guide on how to import values from another file in TS.

# Set "forceConsistentCasingInFileNames" in `tsconfig.json`

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

Copied!
{
  "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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

File name differs from included file name only in casing