Problem with build hooks imports and building on any host

Question

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?

score 1 · Answer 1 · answered Jul 10 '23 at 09:58

1

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.

answered Jul 10 '23 at 09:58

Pluto

4,177
1
3
25

I followed your advice, but unfortunately the error remains the same – ivsheva Jul 10 '23 at 10:27
Now i have even more errors – ivsheva Jul 10 '23 at 10:29
src/Components/PlatformSelector/PlatformSelector.tsx(5,26): error TS2307: Cannot find module '../../Hooks/usePlatforms' or its corresponding type declarations. src/Hooks/UsePlatforms.ts(3,23): error TS2307: Cannot find module '../data/platforms' or its corresponding type declarations. src/Hooks/UsePlatforms.ts(5,23): error TS2307: Cannot find module '../services/api-client' or its corresponding type declarations. src/Hooks/usePlatform.ts(2,26): error TS2307: Cannot find module './usePlatforms' or its corresponding type declarations. Error: Command "npm run build" exited with 2 – ivsheva Jul 10 '23 at 10:29
1

The error message posted shows you use the filename `src/Hooks/UsePlatforms.ts` yet in your code you use `import usePlatforms from "./usePlatforms"` to import the module. Like the answer stated, you should make sure the casing matches. So either use `import usePlatforms from "./UsePlatforms"` or rename the file to `usePlatform.ts`. – 3limin4t0r Jul 10 '23 at 10:54
That's correct - @3limin4t0r – Pluto Jul 10 '23 at 10:56
i checked all the cases and i don't think that the problem is in casing, my casing is ok, its too weird – ivsheva Jul 10 '23 at 10:57
and by some reason when im changing the case of my files, git don't see it – ivsheva Jul 10 '23 at 10:59
@ivsheva [Change case of a file on Windows?](https://stackoverflow.com/questions/1793735/change-case-of-a-file-on-windows) – 3limin4t0r Jul 10 '23 at 11:05
Git is not detecting the changes in the case of your files, because it is configured to ignore case sensitivity. Git is case-sensitive by default, but some file systems (such as Windows or macOS) are case-insensitive. This can cause problems when renaming files or folders in a way that only changes the letter case. So you can use the answer you've found or `git config core.ignorecase false` to make Git case-senstive – Pluto Jul 10 '23 at 11:08
guys, thank you , really much. the problem was in casing, I used git config core.ignorecase false and everything works – ivsheva Jul 10 '23 at 11:23

score 0 · Answer 2 · answered Jul 10 '23 at 11:24

0

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.

answered Jul 10 '23 at 11:24

ivsheva

11
1

Problem with build hooks imports and building on any host

2 Answers2