React Vite doesn't detect my components when adding them to page components – Javascript

When adding components inside my page components i keep getting this error: "Failed to resolve import {url} from {url} Does this file exits"

page component

import Header from "~src/ui/components/organisms/Header/Header";
import $ from "./HomePage.module.scss";

const HomePage: React.FunctionComponent = () => {
  document.title = "Home";

  return (
    <>
      <div className={$.wrapper}>
        <Header type="home" />
      </div>
    </>
  );
};

export default HomePage;

component

import Navbar from "../../molecules/Navbar/Navbar";
import HeaderMainContent from "../../molecules/HeaderMainContent/HeaderMainContent";
import HeaderDetailContent from "../../molecules/HeaderDetailContent/HeaderDetailContent";

import $ from "./Header.module.scss";

type Props = {
  type: "home" | "detail";
};

const Header = ({ type }: Props) => {
  return (
    <header className={`${type === "home" ? $.header_long : $.header_short}`}>
      <div className={$.wrapper}>
        <Navbar type={type === "home" ? "home" : "detail"} />
        {type === "home" && <HeaderMainContent />}
        {type === "detail" && <HeaderDetailContent />}
      </div>
    </header>
  );
};

export default Header;

Folder structure
Screenshot

I also tried adding a different component to the page, but this gave the same error.