'File Name Differs from Already Included File Name Only in Casing' on Relative Path with Same Casing

Solution 1 (worked for me)

The issue occurred when I quickly renamed a file from someFile.ts to SomeFile.ts. Restart your IDE (Visual Studio Code) and the warning will go away.

Solution 2

If you created your file in uppercase and import it in lowercase, the problem still occurs, so check the spelling of the file first.

That's a weird error that occurred in my IDE, but it can be simply done with two simple steps:

rename your file (not component) to another name and once again back to your original name.

Example:

consider we have a myFile.js file in the components directory:

> src
   > components
       > myFile.js

First

Rename myFile.js into another name (anything) like temp.js:

myFile.js    ---->    temp.js

Second

back to its original name,

temp.js    ---->    myFile.js

It's also work fine with *.ts *.tsx *.js *.jsx extensions.

In my case, the error was in the import statement. The import statement had a capital letter instead of small letter, which worked during develop in Windows, but not when compiling for production.

wrong:

import {SomeClass} from '/some/path/SomeClass.ts';

correct:

import {SomeClass} from '/some/path/someClass.ts';

You need to disable the "forceConsistentCasingInFileNames" in the tsconfig.json file.

So you should have something like that:

{
  "compilerOptions": {
    ...
    "forceConsistentCasingInFileNames": false,
    ...
  }
}

For VS Code IDE users:

You can fix it by opening the Command Palette (Ctrl+Shift+P) --> Select Typescript: Restart TS server.

Restarting VS Code IDE didn't work for me and I didn't want to change config files. These are the steps that worked for me to resolve this problem:

1. From VS Explorer, rename the problem file to a new name
2. Change the component name to the new name inside the file
3. Save the file
4. Restart VS Code
5. Rename the file back to the name I originally wanted
6. Change the component name to match

It must be some kind of caching issue inside VS Code

Mine was a vue problem, I removed the .vue extension and it worked

It's not enough to restart your TS server!

As of 2023, I found a consistent way to reproduce the issue. This error will happen whenever you still have imports pointing to the wrong path! (after renaming)

// Wrong path, but same "Already included file name" error
import { Home } from './home';
// CORRECT path, but same "Already included file name" error
import { Home } from './Home'; // <- new path

Fix all imports path and restart your TS server (on VS Code, press F1 > Restart TS server)

TS team should definetly work on improving this error message :)

When two files exist in same folder with names like a.tsx and A.tsx you will get this error

Ok, just need to throw in my "solution" here as well, since it was different from the others. The error message clearly said where it saw an error. It was the casing of a directory that had been renamed (from Utils -> utils). Even though it was renamed correctly everywhere I still got the error. My solution was to rename it once more (why not, hehe) to utils2. After that it worked fine

For VS Code, only thing worked for me was to clear editor history:

1. Press Ctrl + Shift + P.
2. type command Clear Editor History.
3. Press Enter.

For me the problem only went away:

1. Close VS Code
2. Deleting the node_modules\.cache folder.
3. Re-open VS Code

Even after changing cases and making git config ignore case false(git config core.ignorecase false) still I had to follow the following then only it worked as expected!

git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push origin master

Thanks to this comment:

This is the ONLY solution that worked for me!

• OS: windows
• IDE: VSCode
• Project: React + jsconfig.json

The Case Problem

So I had a FOLDER! renamed, not a FILE!. Major difference !
Consider the following folder structure:

*** INITITAL STATE - BEFORE RENAMING ***

|-Highcharts
|
|___  BarChart
|   |
|   |__ index.jsx
|   |__ getBarChartOptions.js
*
*
* * * *

Next thing I did was to rename "Highcharts" to "highcharts", and things started to get nasty. That error popped-up like crazy. That ONE LETTER going from uppercase to lowercase drove it mad!
One place where that lint error came from was a relative import within index.jsx that called getBarChartOptions.js.

// The insides of the index.jsx file

import { getOptions } from './getBarChartOptions';
.
.
.