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?
2
Answers
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.
You might encounter an import error on Vercel, where the filesystem is case-sensitive.
In your code, for example:
You need to make sure that your filenames and import statements match exactly in letter-casing.