Problem with build hooks imports and building on any host

I'm having trouble building my project on Vercel. It builds successfully on my local machine, but when I deploy it on any host, I encounter an import issue that I can't figure out.

Here is the error message I receive during the build process:

[12:07:15.658] src/Components/PlatformSelector/PlatformSelector.tsx(5,26): error TS2307: Cannot find module '../../Hooks/usePlatforms' or its corresponding type declarations.
[12:07:15.659] src/Hooks/usePlatform.ts(1,26): error TS2307: Cannot find module './usePlatforms' or its corresponding type declarations.
[12:07:15.694] Error: Command "npm run build" exited with 2

Here is the code for the usePlatform hook:

import Platform from "../Entities/Platform";
import usePlatforms from "./usePlatforms";

const usePlatform = (id?: number) => {
    const {data: platforms} = usePlatforms();

    return platforms?.results.find((p: Platform) => p.id === id)
}

export default usePlatform;

And here is the code for the usePlatforms hook:

import { useQuery } from '@tanstack/react-query';
import ms from 'ms';
import platforms from '../data/platforms';
import Platform from '../entities/Platform';
import APIClient from '../services/api-client';

const apiClient = new APIClient<Platform>(
  '/platforms/lists/parents'
);

const usePlatforms = () =>
  useQuery({
    queryKey: ['platforms'],
    queryFn: apiClient.getAll,
    staleTime: ms('24h'),
    initialData: platforms,
  });

export default usePlatforms;

Finally, here is the code for the PlatformSelector component:

import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
import { BsChevronDown } from "react-icons/bs";
import Platform from "../../Entities/Platform";
import usePlatform from "../../Hooks/usePlatform";
import usePlatforms from "../../Hooks/usePlatforms";
import useGameQueryStore from "../../store";

const PlatformSelector = () => {
  const setPlatformId = useGameQueryStore((state) => state.setPlatformId);
  const selectedPlatformId = useGameQueryStore(
    (state) => state.gameQuery.platformId
  );

  const selectedPlatform = usePlatform(selectedPlatformId);
  const { data, error } = usePlatforms();

  if (error) return null;

  return (
    <Menu>
      <MenuButton as={Button} rightIcon={<BsChevronDown />}>
        {selectedPlatform?.name || "Platforms"}
      </MenuButton>
      <MenuList>
        {data?.results.map((platform: Platform) => (
          <MenuItem
            onClick={() => setPlatformId(platform.id)}
            key={platform.id}
          >
            {platform.name}
          </MenuItem>
        ))}
      </MenuList>
    </Menu>
  );
};

export default PlatformSelector;

Previously, I had a problem with the case of the usePlatforms hook, as it was initially named with a capital letter. I changed the title and adjusted the TypeScript configuration like this:

"forceConsistentCasingInFileNames": false

I'm receiving the error mentioned above. How can I resolve this issue?

You might encounter an import error on Vercel, where the filesystem is case-sensitive.

In your code, for example:

// usePlatform hook
import Platform from "../Entities/Platform";
// usePlatforms hook
import Platform from '../entities/Platform';

You need to make sure that your filenames and import statements match exactly in letter-casing.

I had to use git config core.ignorecase false to make git see changes in casing. After I used it and change casing in some files and imports , everything works.