How to make Typescript detect import path error with a case sensitive typo?

Question

Typescript didn't detect this typo error (case sensitive).

The name of the file: AdminTextArea

The import with the typo import AdminTextArea from "@components/AdminTextarea"

The typo is: area instead of the correct word Area.

My Typescript environment didn't complain about this at all.

No errors are shown and it runs smoothly.

It was only after I've transpiled it to JS with babel and sent it to run on my Docker container on the cloud, that it triggered this error:

The path is perfect, except for the typo.

What can I do to detect this error in my dev Typescript environment? Is this an eslint thing or is my Typescript not configured correctly?

Answer 1

This is operating-system dependent. Some operating systems have a case-insensitive file system (MacOS would be the primary example). Linux file systems are case-sensitive, so this error may manifest when moving from a case-insensitive file system to one that is case-sensitive.

Unfortunately, TypeScript can't do much about this since it depends on the file system itself. You can add this compiler setting:

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true

This may help detect this error.

Answer 2

With ESLint rule import/no-unresolved you can make sure that case sensitive imports are added correctly.